Question

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

它会像

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

我基本上试图让它看起来像reddit，其中所有的框都是相同的尺寸，但图像不一定，但它们仍然填充整个div，不会扭曲/拉伸。与此同时，我希望它也具有响应性并且在移动设备上看起来很好。我已经尝试将img设置为最大宽度= 100％和最大高度= 100％，但它工作不正常，有些图像没有填满整个div容器。

在大多数使用css的浏览器中，这样做的最佳方法是什么？

Answer 1

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

和你的HTML：

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

Answer 2

这会是一种理想的输出吗？（以下演示）：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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. ）

Answer 4

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

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

4 个答案: