如何通过 CSS 使所有不同高度和宽度的图像相同？
Posted
技术标签:
【中文标题】如何通过 CSS 使所有不同高度和宽度的图像相同？【英文标题】：How can I make all images of different height and width the same via CSS? 【发布时间】：2013-10-25 05:49:33 【问题描述】：我正在尝试创建一个由产品照片组成的图像墙。不幸的是，它们都具有不同的高度和宽度。如何使用 css 使所有图像看起来大小相同？最好是 100 x 100。
我正在考虑制作一个高度和宽度为 100 像素的 div，然后再考虑如何填充它。不知道该怎么做。
我怎样才能做到这一点？
【问题讨论】：
使 div 固定高度/宽度，然后用overflow:none 填充图像，并在 div 中水平/垂直居中图像。
@MarcB 我猜你的意思是overflow: hidden;。 :)
@MarcB 在 css 中没有这样的 overflow:none。即使overflow:hidden也解决不了问题。
【参考方案1】：
图像大小不取决于div的高度和宽度，
在css中使用img元素
这是对你有帮助的 css 代码
div img
width: 100px;
height:100px;
如果你想通过 div 设置大小
使用这个
div
width:100px;
height:100px;
overflow:hidden;
通过此代码，您的图像以原始尺寸显示，但首先显示 100x100px 溢出将隐藏
【讨论】：
【参考方案2】：更新答案（不支持 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>【讨论】：
很棒的答案！当想要用户转发器时，也适用于 Angular 和 Vue 等库！ 使用 div 而不是 img 可能会对 seo 产生影响（不确定） @MuhammadAliMansoor 如果您不使用微数据进行补偿，它可以。我更新了我的答案，以使用 img 标签和 object-fit 实现相同的结果，现在得到了很好的支持。 为什么互联网上没有这一切？它甚至适用于 % 宽度！ 几个月来我一直在努力解决这个等高问题。但现在它被清除了。谢谢。我会将它应用于我所有其他遭受同样命运的应用程序。【参考方案3】：如果没有代码，这很难为您提供帮助，但这里有一些实用建议：
我怀疑你的“图像墙”有某种容器，带有一个 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;
但是，如果您的图像不是完全正方形，则使用此方法会使它们倾斜。
【讨论】：
【参考方案4】：如果你过多地扭曲你的图像，例如，将它们从一个比例中取出，它们可能看起来不正确，我能不能说一下——少量是好的，但一种方法是把图像放在一个'container' 并将容器设置为 100 x 100，然后将图像设置为无溢出，并将最小宽度设置为容器的最大宽度，但这会裁剪一些图像，
例如
<h4>Products</h4>
<ul class="products">
<li class="crop">
<img src="ipod.jpg" />
</li>
</ul>
.crop
height: 300px;
width: 400px;
overflow: hidden;
.crop img
height: auto;
width: 400px;
这样图像将保持其容器的大小，但会在不破坏约束的情况下调整大小
【讨论】：
这是我的首选方法。它比使用背景更实用。 这绝对是更好的选择，我的图像完全没有失真【参考方案5】：对于那些使用 Bootstrap 并且不想失去响应性的人，不要设置容器的宽度。以下代码基于 gillytech 帖子。
index.hmtl
<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 -->
style.css
/*images with the same width*/
.crop
height: 300px;
/*width: 400px;*/
overflow: hidden;
.crop img
height: auto;
width: 100%;
或 style.css
/*images with the same height*/
.crop
height: 300px;
/*width: 400px;*/
overflow: hidden;
.crop img
height: 100%;
width: auto;
【讨论】：
【参考方案6】：转到您的 CSS 文件并按以下方式调整所有图像的大小
img
width: 100px;
height: 100px;
【讨论】：
简单直接！【参考方案7】：我一直在为同样的问题寻找解决方案，创建一个徽标列表。
我提出了这个解决方案，它使用了一些 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.：您可能需要添加一些前缀或使用自动前缀。
【讨论】：
【参考方案8】：你可以这样做：
.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%;
【讨论】：
【参考方案9】：基于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+ */
【讨论】：
【参考方案10】：在 CSS 文件中设置高度和宽度参数
.ImageStyle
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
【讨论】：
【参考方案11】：最简单的方法 - 这将保持图像大小不变并用空间填充其他区域，这样所有图像都将占用相同的指定空间，而不管图像大小如何而不会拉伸
.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;
【讨论】：
哇，就这么简单。也许其他答案是“正确的”，但这是最容易实现的。 唯一需要注意的是不支持 IE11。 这样做的好处是您的图像没有被裁剪或歪斜，但缺点是它们不一定都显示相同的大小。除了 object-fit:scale-down，您还可以尝试 object-fit:cover。【参考方案12】：您可以使用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 的正方形组成。
【讨论】：
这很好，但它不适用于任何版本的 IE。 caniuse.com/#feat=object-fit【参考方案13】：.article-img img
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
您将使图像大小与 div 相同，并且您可以使用引导网格来相应地操作 div 大小
【讨论】：
【参考方案14】：使用此 CSS 样式更改您的图像标签。
img
float: left;
width: 100px;
height: 100px;
object-fit: cover;
【讨论】：
这与 2013 年的 accepted answer 完全相同，获得了 200 多票（第一个代码块）。以上是关于如何通过 CSS 使所有不同高度和宽度的图像相同？的主要内容，如果未能解决你的问题，请参考以下文章
css 使容器的高度和宽度始终相同。适合方形容器上的背景图像！
如何裁剪引导图像以获得所有图像的宽度 285 和高度 170？