我正在尝试创建一个由产品照片组成的图像墙。不幸的是，它们都具有不同的高度和宽度。如何使用 css 使所有图像看起来大小相同？最好是 100 x 100。
我正在考虑制作一个高度和宽度为 100 像素的 div，然后再考虑如何填充它。不知道该怎么做。
我怎样才能做到这一点？
【问题讨论】：
overflow:none 填充图像，并在 div 中水平/垂直居中图像。
overflow: hidden;。 :)
overflow:none。即使overflow:hidden也解决不了问题。
图像大小不取决于div的高度和宽度，
在css中使用img元素
这是对你有帮助的 css 代码
div img{
width: 100px;
height:100px;
}
如果你想通过 div 设置大小
使用这个
div {
width:100px;
height:100px;
overflow:hidden;
}
通过此代码，您的图像以原始尺寸显示，但首先显示 100x100px 溢出将隐藏
【讨论】：
更新答案（不支持 IE11）
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">原答案
.img {
float: left;
width: 100px;
height: 100px;
background-size: cover;
}<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>【讨论】：
如果没有代码，这很难为您提供帮助，但这里有一些实用建议：
我怀疑你的“图像墙”有某种容器，带有一个 id 或类来赋予它样式。
例如：
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="content">
<div id="imagewall">
<img src"img.jpg">
<!-- code continues -->
如果您的代码设置与上述类似，那么在不影响其他图像（如您的徽标等）的情况下，为您的图像墙设置所有图像的尺寸是很容易的。
#imagewall img {
width: 100px;
height: 100px; }
但是，如果您的图像不是完全正方形，则使用此方法会使它们倾斜。
【讨论】：
如果你过多地扭曲你的图像，例如，将它们从一个比例中取出，它们可能看起来不正确，我能不能说一下——少量是好的，但一种方法是把图像放在一个'container' 并将容器设置为 100 x 100，然后将图像设置为无溢出，并将最小宽度设置为容器的最大宽度，但这会裁剪一些图像，
例如
<h4>Products</h4>
<ul class="products">
<li class="crop">
<img src="ipod.jpg" alt="iPod" />
</li>
</ul>
.crop {
height: 300px;
width: 400px;
overflow: hidden;
}
.crop img {
height: auto;
width: 400px;
}
这样图像将保持其容器的大小，但会在不破坏约束的情况下调整大小
【讨论】：
对于那些使用 Bootstrap 并且不想失去响应性的人，不要设置容器的宽度。以下代码基于 gillytech 帖子。
<div id="image_preview" class="row">
<div class='crop col-xs-12 col-sm-6 col-md-6 '>
<img class="col-xs-12 col-sm-6 col-md-6"
id="preview0" src='img/preview_default.jpg'/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
more stuff
</div>
</div> <!-- end image preview -->
/*images with the same width*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: auto;
width: 100%;
}
/*images with the same height*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: 100%;
width: auto;
}
【讨论】：
转到您的 CSS 文件并按以下方式调整所有图像的大小
img {
width: 100px;
height: 100px;
}
【讨论】：
我一直在为同样的问题寻找解决方案，创建一个徽标列表。
我提出了这个解决方案，它使用了一些 flexbox，它对我们有用，因为我们不担心旧浏览器。
此示例假定一个 100x100 像素的框，但我很确定该大小可以灵活/响应。
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 100px; height: 100px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}
ps.：您可能需要添加一些前缀或使用自动前缀。
【讨论】：
你可以这样做：
.container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}
img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
【讨论】：
基于Andi Wilkinson's answer（第二个），我做了一点改进，确保显示图像的中心（就像接受的答案一样）：
HTML：
<div class="crop">
<img src="img.png">
</div>
CSS：
.crop{
height: 150px;
width: 200px;
overflow: hidden;
}
.crop img{
width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-50%); /* IE 9 */
transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
【讨论】：
在 CSS 文件中设置高度和宽度参数
.ImageStyle{
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
}【讨论】：
最简单的方法 - 这将保持图像大小不变并用空间填充其他区域，这样所有图像都将占用相同的指定空间，而不管图像大小如何而不会拉伸
.img{
width:100px;
height:100px;
/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
object-fit:scale-down;
}
【讨论】：
您可以使用object-fit 属性来调整img 元素的大小：
cover 按比例拉伸或缩小图像以填充容器。如有必要，图像将被水平或垂直裁剪。contain 按比例拉伸或缩小图像以适应容器。scale-down 按比例缩小图像以适应容器。.example {
margin: 1em 0;
text-align: center;
}
.example img {
width: 30vw;
height: 30vw;
}
.example-cover img {
object-fit: cover;
}
.example-contain img {
object-fit: contain;
}<div class="example example-cover">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>
<div class="example example-contain">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>在上面的例子中：红色是横向，绿色是纵向，蓝色是方形图像。方格图案由 16x16px 的正方形组成。
【讨论】：
.article-img img{
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
}
您将使图像大小与 div 相同，并且您可以使用引导网格来相应地操作 div 大小
【讨论】：
使用此 CSS 样式更改您的图像标签。
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
【讨论】：