如何拉伸图像以覆盖div的整个宽度和高度？ （使用Flexbox）

时间：2016-03-14 20:48:07

标签： html css angularjs css3 flexbox

我想调整图像的大小以掩盖整个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的链接以获取更多详细信息：here

第一张，第三张和第四张图像小于其余图像。任何人都可以告诉我如何将这些图像拉伸到其容器div的大小，以便它看起来像所有图像大小相同。先感谢您。 P.S：我尝试了对象，但它不起作用。

6 个答案:

答案 0 :(得分：1)

使用background-size：cover;在你的CSS规则中，元素可能是获得完整图像覆盖率的最简单方法。但是，这可能会切断一些内容，具体取决于您是否将背景图像置于div中心或者如何调整其大小。

背景尺寸：包含;可能更有用，但我是封面尺寸属性的忠实粉丝。

<强>更新

如果你想避免使用背景图像，那么你可以尝试将img标签设置为100％宽度和/或高度，但是这会扭曲你的图像并导致其他问题，你可能不得不执行一些JS计算为了防止这种情况。

为什么厌恶使用背景图片？

答案 1 :(得分：1)

以下是一些方法，具体取决于您是否需要拉伸或剪裁图像。

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

此外，使用图像网址的内联样式，您可以轻松地使用角度工作，而不会弄乱外部CSS。

样品1 - 拉伸

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

样本2 - 剪裁，居中对齐

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

样本3 - 剪裁，居中对齐，固定高度（同时删除img）

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试调整你的.third，它有一个默认的填充，你可以通过添加下面的CSS删除。您可以根据需要调整高度。这样你可以避免背景图像，但背景图像仍然是最有效的。

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

答案 3 :(得分：0)

你可以这样做，但它会失去图像的宽高比。

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%;
}

答案 4 :(得分：0)

首先删除所有<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;
}

答案 5 :(得分：0)

尽管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>

相关问题
最新问题