如何通过CSS制作不同高度和宽度的所有图像？

Question

我正在尝试创建一个由产品照片组成的图像墙.不幸的是,它们都具有不同的高度和宽度.如何使用css使所有图像看起来大小相同？最好是100 x 100.

我正在考虑做一个高度和宽度为100px的div,然后是一些如何填充它.不知道怎么做.

我怎么能做到这一点？

Answer 1

.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>

Answer 2

如果你过分扭曲你的图像,即将它们从一个比例中取出,它们可能看起来不正确,我可以投入其中 - 一点点就可以了,但是这样做的一种方法是将图像放在一个"容器"里面并将容器设置为100 x 100,然后将图像设置为overflow none,并将最小宽度设置为容器的最大宽度,这将裁剪您的图像,

例如

<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;
}

这样,图像将保持其容器的大小,但会在不破坏约束的情况下调整大小

Answer 3

最简单的方法 - 这将保持图像大小不变,并用空间填充其他区域,这样所有图像将占用相同的指定空间,无论图像大小如何,无需拉伸

.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;

}

Answer 4

您可以使用该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的正方形组成.