我怎樣才能讓我的圖像完全填滿我的 div？

Question

我正在嘗試創建一個英雄圖像，它將填充 div 到我的網頁。 我試過將寬度和高度設置為 100%，但由於某種原因，圖像只會將 div 填充到大約一半。

這是 CSS 和 HTML我試圖讓圖像填滿整個屏幕，但它對我不起作用

 div.hero{ width: 100%; height: 100%; margin:0 auto; } #imghero { max-width: 100%; max-height: 100%; }

 <main> <div class="hero"> <img src="https://i.stack.imgur.com/4Xg4w.jpg" alt="laptop" class="imghero"> <h1>Welcome</h1> </div> </main>

Answer 1

您還必須為圖像設置寬度和高度，而不僅僅是最大寬度和最大高度

 div.hero{width : 100%; height: 100%;margin:0 auto; } .imghero{max-width: 100%; max-height: 100%; height: 300px; width: 100% !important; }

 <main> <div class="hero"> <img src="https://i.stack.imgur.com/4Xg4w.jpg" alt="laptop" class="imghero"> <h1>Welcome</h1> </div> </main>

Answer 2

使用.imghero而不是#imghero ，您將 imghero 聲明為類

Answer 3

您可以嘗試將背景圖像設置為 div

 .hero{ background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQc-z-m2WiHy9yx9AfLg_YEi6mzltIlkaY_JGrIhP8d8mh_wMpB"); background-size: cover; background-repeat: no-repeat; /*this is optional*/ min-height: 500px; }

 <main> <div class="hero"> <h1>Welcome</h1> </div> </main>

Answer 4

我不會將圖像直接放在 div 中，而是添加為背景圖像。

<main>

    <div class="hero">

    </div>

</main>

和 CSS

 .hero {
   background-image:url(image address here.);
   padding-top:300px;
   padding-bottom:300px;
}

CSS 中的 padding 為 div 添加了高度，如果你想在那里添加文本，這很方便。

或者你可以用height: auto替換 padding 來填充整個瀏覽器的高度。

Answer 5

我看到這里的其他人建議使用背景圖像，但我建議使用實際的圖像元素，並使用object-fit: cover縮放。 這有兩個原因。

1. 您獲得了擁有實際圖像元素的 SEO 和可訪問性優勢
2. 它為您提供了圖像元素的所有好處，例如使用 srcset 為各種設備提供不同大小的服務，使用延遲加載等...

這是你如何做到的：

html

<div class="container">
  <img
    src="imageurl.jpg"
    srcset="*optional*"
    sizes="*optional*"
    alt="My image"
  />
</div>

css

.container {
  position: relative;
  width: 80vw;   /* Or whatever size you want */
  height: 50vh;  /* Or whatever size you want */
}

.container img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

如果容器上沒有固定的高度/高度，則可以使用縱橫比，如下所示：

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

Answer 6

由於您使用的是img標簽，因此您無法操縱圖像的寬度和高度，它的 max-width 和 max-height 將是圖像的寬度和高度。

為了讓它跨越整個寬度/高度，您需要將其添加為 background-image 屬性。 然后您可以在div上設置寬度和高度。

HTML （注意，這里我們不包括圖像，我們在 CSS 中這樣做）：

<main>
  <div class="hero imghero">
    <h1>Welcome</h1>
  </div>
</main>

CSS :

.hero  {
   width: 100%;
   height: 100%;
   margin: 0;
}

.imhero {
   width: 100%;
   height: 100%;
   background-image: url("https://i.stack.imgur.com/4Xg4w.jpg") no-repeat;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

}