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

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

我正在考虑做一个高度和宽度为100px的div，然后再进行一些填充。不知道该怎么做。

我该怎么做？

更新的答案（不支持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>

我可以抛出一个问题，就是如果您过度扭曲图像，即以一定比例使它们看起来不正确，则可能看起来不正确，但是可以这样做的一种方法是将图像放入“容器”中并将容器设置为100 x 100，然后将图像设置为不溢出，并将最小宽度设置为容器的最大宽度，尽管这样会裁切一些图像，

例如

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

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

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

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

}

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

对于那些使用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%;
}

或style.css

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

您可以这样进行：

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

我一直在寻找解决此问题的解决方案，以创建徽标列表。

我想出了一个使用了一点flexbox的解决方案，因为我们不担心旧的浏览器，所以对我们有用。

此示例假设使用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 .：您可能需要添加一些前缀或使用自动前缀。

根据安迪·威尔金森（Andi Wilkinson）的答案（第二个答案），我做了一些改进，确保显示了图像的中心（就像接受的答案一样）：

HTML：

<div class="crop">
   <img src="img.png">
</div>

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

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

.ImageStyle{

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

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

您将使图像大小与div相同，并且可以使用引导网格相应地操纵div大小

图片大小不取决于div的高度和宽度，

在CSS中使用img元素

这是可以帮助您的CSS代码

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

如果要按div设置大小

用这个

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

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

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

我怀疑您的“图像墙”有某种带有ID或类的容器来赋予其样式。

例如：

<body>

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

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

如果您的代码设置与上述类似，则在不影响其他图像（例如徽标等）的情况下，在图像墙的所有图像上设置大小是容易的。

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

但是，如果您的图像不是完美的正方形，则使用此方法将使它们倾斜。

转到您的CSS文件，并按照以下步骤调整所有图片的大小

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