如何防止圖像溢出其容器？

Question

我在一個頁面中使用 Reactjs ......就像一本日記。 在頁面的末尾，我試圖在頁面內設置一個 img，但由於大小，它超出了頁面...我嘗試使用 Css 對其進行修改，但仍然無法正常工作。 你能幫我嗎？

這是頁面的外觀：

這是 html 代碼的樣子：

<div className="notes__content">
            <input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
            <textarea placeholder="What happened today?" className="notes__textarea"></textarea>
            <div className="notes__image">
                <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
            </div>
        </div>

這就是我設置 css 的方式：

    .notes__main-content{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notes__appbar{
    align-items: center;
    background-color: $primary;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 10px 20px;   
}

.notes__content{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

.notes__title-input, .notes__textarea{
    border: none;

    &:focus{
        outline: none;
    }
}

.notes__title-input{
    color: $dark-grey;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
}

.notes__textarea{
    border: none;
    color: $dark-grey;
    font-size: 20px;
    flex: 1 1 auto;
    resize: none;   
}

.notes__image{
    box-shadow: 5px 5px $dark-grey;
    height:  150px;
}

需要明確的是，我想要做的是將 img 設置為 150px 以便它適合我的頁面。 謝謝您的幫助

Answer 1

圖像不會神奇地縮小以適應它們的容器。 您需要告訴他們這樣做：

.notes__image img {
  max-width: 100%; /* <-- here's your huckleberry */
}

您不想使用width屬性，因為它會將圖像拉伸到超出其原始尺寸，並且您不想設置高度，因為這會弄亂縱橫比。

在這里，出於演示目的，我將className轉換為class 。 如果您查看全屏演示並縮小 window 大小，您可以看到它的實際效果。

 .notes__main-content { display: flex; flex-direction: column; height: 100%; }.notes__appbar { align-items: center; background-color: $primary; color: white; display: flex; justify-content: space-between; padding: 10px 20px 10px 20px; }.notes__content { display: flex; flex-direction: column; height: 100%; padding: 20px; }.notes__title-input, .notes__textarea { border: none; &:focus { outline: none; } }.notes__title-input { color: $dark-grey; font-size: 25px; font-weight: 700; margin-bottom: 10px; }.notes__textarea { border: none; color: $dark-grey; font-size: 20px; flex: 1 1 auto; resize: none; }.notes__image { box-shadow: 5px 5px $dark-grey; height: 150px; }.notes__image img { max-width: 100%; /* <-- here's your huckleberry */ }

 <div class="notes__content"> <input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" /> <textarea placeholder="What happened today?" class="notes__textarea"></textarea> <div class="notes__image"> <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" /> </div> </div>

Answer 2

您可以在notes__image div 中添加另一個 div。 讓我們用一個 div 包裝器將它notes__image__inner 。

<div className="notes__content">
        <input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
        <textarea placeholder="What happened today?" className="notes__textarea"></textarea>
        <div className="notes__image">
          <div className="notes__inner__image">
            <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
           </div>
        </div>
    </div>

用這個更新notes__image和img CSS：

.notes__image {
  box-shadow: 5px 5px $dark-grey;
  height: 150px;
  position: relative;
}
.notes__inner__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.notes__inner__image img {
   width: 100%;
   position: static;
   height: 100%;
   object-fit: cover;
}

Answer 3

className 屬性在 React 中使用。 這是一個 React 應用程序嗎？ 如果不是，則需要修改為“類”。

還要確保您的圖像不會溢出 div 的邊界。 您可以使用 img 標簽的“width”和“height”屬性在圖像中設置嚴格的寬度和高度。 或者創建一個 notes__image img 聲明，如下所示：

.notes__image img {
  width: 100%;
  height: 100%;
}