创建大小相等的响应式 div 容器，不同大小的上传图像填充整个 div。答案

【问题标题】：creating responsive div containers equal in size, with different sized uploaded images fill entire div.创建大小相等的响应式 div 容器，不同大小的上传图像填充整个 div。
【发布时间】：2016-03-06 06:41:37
【问题描述】：

这可能听起来令人困惑，但基本上我的网站上有一个称为分类的部分，我正在设计我希望看起来统一，无论上传的图像类型如何。

会是这样的

<div class = "classified-container>
    <img class = "classified-img" src = "blablabla.jpg "/>
</div>

我基本上是想让它看起来像 reddit，其中所有框的大小都相同，但图像不一定是相同的，但它们仍会填充整个 div 并且不会变形/拉伸。同时我希望它也能响应并在移动设备上看起来不错。我尝试将 img 设置为最大宽度 = 100% 和最大高度 = 100%，但它工作不正常，一些图像没有填满整个 div 容器。

在大多数使用 css 的浏览器中也兼容的最佳方法是什么？

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

 .classified-container{
   background-image:url('blablabla.jpg');
   background-repeat:no-repeat;
   background-size:100% 100%;
}

和你的 HTML：

<div class ="classified-container></div>

【讨论】：

对不起，我应该澄清这一点，但网站的整个页面是使用 php 设置来实现和创建页面布局的，因此图像未设置为背景图像的解决方案将对我更好。

【解决方案2】：

CSS object-fit: cover; 可以解决这个问题。它的行为类似于background-size:cover; 并在保持图像纵横比的同时填充容器。 Checkout this awesome explanation.

因此，以下代码将在保持图像纵横比的同时，用它们的图像填充容器。现在，如果您真的想获得创意，请尝试结合object-position: 属性。

div {
  width: 20vw;
  height: 15vw;
}
img {
  max-height: 100%;     /* assures img height to be container height */
  min-height: 100%;        
  width: 100%;          /* limit the overflow */
  object-fit: cover;    /* fills the parent w/o stretching */
}

See Demo

浏览器支持也不错 (object-fit is supported by everything except IE/Edge.)

【讨论】：

“除了 IE/Edge 之外的所有东西”都不是很好的支持。网络适合所有人。
确实如此。由于 max,min & width 作为后备，它在 IE/Edge 上仍然可以正常工作（具有拉伸效果，图像比例很奇怪。）因为他不能使用 background-image 选项，我认为这将是下一个最好的事情.
他可以使用background-image，将它作为样式属性应用到DOM元素上。这与以编程方式应用 src 属性一样多。

【解决方案3】：

background-size: cover 可以解决问题。

<div class ="classified-container" style="background-image: url('blablabla.jpg')"></div>
</div>

<style>
  .classified-container {
    background-size: cover;
  }
</style>

background-image 其实有很好的支持：回到IE9，和所有其他浏览器。

您必须为每个元素添加背景图像样式，并在url("{path}") 中添加图像路径。 http://www.w3schools.com/css/css_background.asp

【讨论】：

【解决方案4】：

这会是期望的输出吗？（下面的演示）：

.classified-container {
  float: left;
  width: 20%;
  height: 15vw;
  overflow: hidden;
}
.classified-img {
  min-height: 100%;
  min-width: 100%;
}

.classified-container {
  float: left;
  width: 20%;
  height: 15vw;
  overflow: hidden;
}
.classified-img {
  min-height: 100%;
  min-width: 100%;
}
body {
  margin:0;

<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/160" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/110/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/80/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/90/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/150/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/50" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/160" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/110/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/80/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/90/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/150/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/50" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/160" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/110/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/80/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/100" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/90/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/150/150" />
</div>
<div class="classified-container">
  <img class="classified-img" src="http://lorempixel.com/100/50" />
</div>

【讨论】：