如何通过CSS使所有不同高度和宽度的图像相同？ [英] How can I make all images of different height and width the same via CSS?

问题描述

我试图创建一个由产品照片组成的图像墙。不幸的是，它们都具有不同的高度和宽度。如何使用CSS使所有图像看起来相同的大小？

我在想一个div的高度和宽度为100px，然后一些如何填补它。不知道如何做到这一点。

如何实现这一点？

解决方案

  .img {position：relative; float：left; width：100px; height：100px;背景位置：50％50％;背景重复：无重复; background-size：cover;}  

 < div class = imgstyle =background-image：url（'http://i.imgur.com/tI5jq2c.jpg'）;>< / div>< div class =imgstyle = image：url（'http://i.imgur.com/37w80TG.jpg'）;>< / div>< div class =imgstyle =background-image：url（'http： /i.imgur.com/B1MCOtx.jpg'）;>< / div>  

b

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.

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?

解决方案

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    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屋！