Html 如何通过 CSS 使所有不同高度和宽度的图像相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19414856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make all images of different height and width the same via CSS?
提问by ariel
I am trying to create an image wall consisting of product photos. Unfortunately, all of them are of different height and width. How can I use css to make all images look the same size? preferably 100 x 100.
我正在尝试创建一个由产品照片组成的图像墙。不幸的是，所有这些都有不同的高度和宽度。如何使用 css 使所有图像看起来大小相同？最好是 100 x 100。
I was thinking of doing a div that has height and width of 100px and then some how filling it up. NOt sure how to do that.
我正在考虑做一个高度和宽度为 100px 的 div，然后如何填充它。不知道该怎么做。
How can I accomplish this?
我怎样才能做到这一点？
回答by Simon Arnold
Updated answer (No IE11 support)
更新答案（不支持 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">Original answer
原答案
.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>回答by Andi Wilkinson
can i just throw in that if you distort your images too much, ie take them out of a ratio, they may not look right, - a tiny amount is fine, but one way to do this is put the images inside a 'container' and set the container to the 100 x 100, then set your image to overflow none, and set the smallest width to the maximum width of the container, this will crop a bit of your image though,
如果你把你的图像扭曲太多，我可以把它扔进去吗并将容器设置为 100 x 100，然后将图像设置为无溢出，并将最小宽度设置为容器的最大宽度，但这会裁剪一些图像，
for example
例如
<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;
}
This way the image will stay the size of its container, but will resize without breaking constraints
这样图像将保持其容器的大小，但会在不破坏约束的情况下调整大小
回答by Manoj Selvin
Simplest way - This will keep the image size as it is and fill the other area with space, this way all the images will take same specified space regardless of the image size without stretching
最简单的方法 - 这将保持图像大小不变，并用空间填充其他区域，这样所有图像都将占用相同的指定空间，无论图像大小如何而不会拉伸
.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;
}
回答by Salman A
You can use the object-fitproperty to size the imgelements:
您可以使用该object-fit属性来调整img元素的大小：
coverstretches or shrinks the image proportionally to fill the container. The image is cropped horizontally -or- vertically if necessary.containstretches or shrinks the image proportionally to fit inside the container.scale-downshrinks the image proportionally to fit inside the container.
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>In the above example: red is landscape, green is portrait and blue is square image. The checkered pattern consists of 16x16px squares.
在上面的例子中：红色是风景，绿色是肖像，蓝色是方形图像。方格图案由 16x16 像素的方块组成。
回答by Sven Ya
For those using Bootstrapand not wanting to lose the responsivness just do not set the width of the container. The following code is based on gillytechpost.
对于那些使用Bootstrap并且不想失去响应性的人，不要设置容器的宽度。以下代码基于gillytech帖子。
index.hmtl
索引.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%;
}
OR style.css
或style.css
/*images with the same height*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: 100%;
width: auto;
}
回答by Arun ks
You can do it this way:
你可以这样做：
.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%;
}
回答by Alexee
Based on Andi Wilkinson's answer(the second one), I improved a little, make sure the center of the image is shown (like the accepted answer did):
基于安迪威尔金森的回答（第二个），我改进了一点，确保显示图像的中心（就像接受的答案一样）：
HTML:
HTML：
<div class="crop">
<img src="img.png">
</div>
CSS:
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+ */
}
回答by Ema
Set height and width parameters in CSS file
在 CSS 文件中设置高度和宽度参数
.ImageStyle{
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
}回答by Manav Kothari
.article-img img{
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
}
You will make images size same as div and you can use bootstrap grid to manipulate div size accordingly
您将使图像大小与 div 相同，并且您可以使用引导网格来相应地操作 div 大小
回答by rafaelbiten
I was looking for a solution for this same problem, to create a list of logos.
我一直在为同样的问题寻找解决方案，以创建徽标列表。
I came up with this solution that uses a bit of flexbox, which works for us since we're not worried about old browsers.
我想出了这个使用一点 flexbox 的解决方案，它对我们有用，因为我们不担心旧浏览器。
This example assumes a 100x100px box but I'm pretty sure the size could be flexible/responsive.
这个例子假设一个 100x100px 的盒子，但我很确定这个尺寸可以是灵活的/响应式的。
.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.: you may need to add some prefixes or use autoprefixer.
ps.: 您可能需要添加一些前缀或使用 autoprefixer。
