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

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?

我怎么能做到这一点？

12 个解决方案

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

#2

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，然后将图像设置为overflow none，并将最小宽度设置为容器的最大宽度，这将裁剪您的图像，

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

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

#3

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;

}

#4

For those using Bootstrap and not wanting to lose the responsivness just do not set the width of the container. The following code is based on gillytech post.

对于那些使用Bootstrap并且不想失去响应的人来说，不要设置容器的宽度。以下代码基于gillytech帖子。

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

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

#5

You can use the object-fit property to size the img elements:

您可以使用object-fit属性来调整img元素的大小：

• cover stretches or shrinks the image proportionally to fill the container. The image is cropped horizontally -or- vertically if necessary.
• 盖子按比例拉伸或收缩图像以填充容器。如有必要，图像将水平或垂直裁剪。
• contain stretches or shrinks the image proportionally to fit inside the container.
• 包含拉伸或缩小图像按比例放入容器内。
• scale-down shrinks the image proportionally to fit inside the container.
• 缩小比例缩小图像以适合容器内部。

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

在上面的例子中：红色是风景，绿色是肖像，蓝色是方形图像。方格图案由16x16px正方形组成。

#6

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

#7

Set height and width parameters in CSS file

在CSS文件中设置高度和宽度参数

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

#8

Image size is not depend on div height and width,

图像大小不依赖于div的高度和宽度，

use img element in css

在css中使用img元素

Here is css code that help you

这是帮助您的CSS代码

div img{
         width: 100px;
         height:100px;
 }

if you want to set size by div

如果你想用div设置大小

use this

用这个

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

by this code your image show in original size but show first 100x100px overflow will hide

通过此代码，您的图像以原始大小显示，但显示首先100x100px溢出将隐藏

#9

Without code this is difficult to help you but here's some practical advice for you:

没有代码，这很难帮助你，但这里有一些实用的建议：

I suspect that your "image wall" has some sort of container with an id or class to give it styles.

我怀疑你的“图像墙”有一些带有id或类的容器来给它样式。

eg:

例如：

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Styling a size on all images for your image wall, while not affecting other images, like you logo, etc. is easy if your code is set up similar to the above.

如果您的代码设置与上述类似，则可以轻松地为图像墙的所有图像设置尺寸，同时不影响其他图像，如徽标等。

#imagewall img {
  width: 100px;
  height: 100px; }

But if your images are not perfectly square they will be skewed using this method.

但是如果你的图像不是完全正方形，那么使用这种方法就会产生偏差。

#10

Go to your CSS file and resize all your images as follows

转到CSS文件并按如下方式调整所有图像的大小

img {
  width:  100px;
  height: 100px;
}

#11

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。

#12

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):

基于Andi Wilkinson的答案（第二个），我稍微改进了一下，确保显示图像的中心（就像接受的答案一样）：

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+ */
}