如何通过 CSS 使所有不同高度和宽度的图像相同? [英] How can I make all images of different height and width the same via 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 使所有不同高度和宽度的图像相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！