如何拉伸圖像以覆蓋div的整個寬度和高度？ （使用Flexbox）

Question

我想調整圖像的大小以覆蓋整個div。 如果你們可以在CSS中建議任何內容而不是使用javascript，那將非常有幫助。

這是我現在所擁有的樣本

.third{
  width:30%;
  float:left;
  margin:8px;
}

.second{
  display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
img{
  width:100%;
  object-fit:fill;
}

<div class="first">
  <div class="second">
    <div class="third">
      <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
    </div>
    <div class="third">
      <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
    </div>
    <div class="third">
      <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
    </div>
    <div class="third">
      <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
    </div>
    <div class="third">
      <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
    </div>
    <div class="third">
      <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
    </div>
  </div>
</div>

以下是指向Codepen的鏈接以獲取更多詳細信息： http ://codepen.io/gruler05/pen/vGyObo

第一，第三和第四張圖像小於其余圖像。 誰能告訴我如何將這些圖像拉伸到其容器div的大小，以使所有圖像看起來都一樣。 先感謝您。 PS：我嘗試過對象擬合，但是沒有用。

Answer 1

使用background-size：cover; 在CSS規則中，該元素可能是獲得完整圖像覆蓋范圍的最簡單方法。 但是，這可能會切斷某些內容，具體取決於您是否將背景圖像放在div中居中或調整其大小。

背景大小：包含； 也許會更有用，但是我非常喜歡Cover size屬性。

更新資料

如果要避免使用背景圖片，則可以嘗試將img標簽設置為寬度和/或高度的100％，但這會扭曲圖片並引起其他問題，因此您可能必須執行一些JS計算以防止這種情況。

為什么不喜歡使用背景圖像？

Answer 2

這是幾種方法，具體取決於您要拉伸圖像還是剪切圖像。

在示例1和2中，我使用的技巧是使img保持visibility: hidden起來不必在third div上設置固定高度。

另外，使用內聯樣式作為圖像url，您可以輕松地將其與angular一起使用，而不會弄亂外部CSS。

樣品1-拉伸

 .third { flex: 1 0 calc(33% - 16px); margin: 8px; position: relative; background-size: 100% 100%; } .second{ display: flex; flex-flow: row wrap; } img { visibility: hidden; width: 100%; height: auto; } 

 <div class="first"> <div class="second"> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> </div> </div> 

樣本2-修剪，居中對齊

 .third { flex: 1 0 calc(33% - 16px); margin: 8px; position: relative; background-size: cover; background-position: center; } .second{ display: flex; flex-flow: row wrap; } img { visibility: hidden; width: 100%; height: auto; } 

 <div class="first"> <div class="second"> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> </div> </div> 

示例3-裁剪，居中對齊，固定高度（也刪除了img ）

 .third { flex: 1 0 calc(33% - 16px); margin: 8px; position: relative; background-size: cover; background-position: center; height: 150px; } .second{ display: flex; flex-flow: row wrap; } img { visibility: hidden; width: 100%; height: auto; } 

 <div class="first"> <div class="second"> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> </div> <div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> </div> <div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)"> </div> </div> </div> 

Answer 3

嘗試調整您的.third，它具有默認的填充，您可以通過添加以下CSS將其刪除。 您可以根據需要調整高度。 這樣您可以避免使用背景圖像，但是背景圖像仍然是最有效的。

.third {
  width: 33.33%;
  height: 100px;
  float: left;
  margin:0;
  padding:0;
}

Answer 4

您可以執行此操作，但是它將失去圖像的縱橫比。

HTML：添加一個帶有class =“ row”的div，並將每個內放3張圖片

 <div class="first"> <div class="second"> <div class="row"> <div class="third"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> </div> <div class="row"> <div class="third"> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg"> </div> <div class="third"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> <div class="third"> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg"> </div> </div> </div> </div> 

CSS：添加以下代碼以將.row設置為固定高度，並將圖像高度設置為95％

 .row{ height:150px; //whatever height you want } .third img{ height:95%; } 

Answer 5

首先刪除所有<img>標簽
然后使用這個CSS

.third{
  width:290px;
  height:180px;
  float:left;
  margin:8px;
  background-image:url("https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg");
  background-size:cover;
}

Answer 6

盡管flexbox是一種很好的方法，但是最簡單的方法是使用表，並將圖像作為數據插入。 這是代碼

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Images</title> </head> <body> <table> <tr> <td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"></td> <td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td> <td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"> </td> </tr> <tr> <td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"> </td> <td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td> <td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td> </tr> </table> </body> </html>