本文介绍了如何通过 CSS 使所有不同高度和宽度的图像相同?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建由产品照片组成的图像墙.不幸的是,所有这些都有不同的高度和宽度.如何使用 css 使所有图像看起来大小相同?最好是 100 x 100.
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.
我正在考虑做一个高度和宽度为 100 像素的 div,然后如何填充它.不知道该怎么做.
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.
我怎样才能做到这一点?
How can I accomplish this?
推荐答案
更新答案(不支持 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>
这篇关于如何通过 CSS 使所有不同高度和宽度的图像相同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!