118

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

我正在考虑做一个高度和宽度为 100 像素的 div，然后再做一些填充它的方法。不知道该怎么做。

我怎样才能做到这一点？

4

14 回答 14

222

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

于 2013-10-16T22:19:01.690 回答
40

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

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

}
于 2017-09-21T13:07:19.590 回答
36

如果你扭曲你的图像太多，我可以把它们排除在一个比例之外，它们可能看起来不正确， - 少量很好，但一种方法是将图像放入“容器”中并将容器设置为 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;
}

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

于 2013-10-17T07:05:50.467 回答
24

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

于 2018-05-30T20:06:36.480 回答
3

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

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

样式.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;
}
于 2016-03-24T14:18:45.290 回答
3

你可以这样做：

 .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%;
}
于 2016-12-01T05:37:28.200 回答
3

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

.ImageStyle{

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

于 2017-07-10T09:07:35.497 回答
2

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

我想出了这个解决方案，它使用了一些 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.：您可能需要添加一些前缀或使用自动前缀。

于 2016-05-31T13:46:15.067 回答
1

根据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+ */
}
于 2017-01-10T05:57:47.943 回答
1 
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

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

于 2019-02-02T07:11:07.157 回答
0

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

在 css 中使用 img 元素

这是可以帮助您的CSS代码

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

如果你想通过 div 设置大小

用这个

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

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

于 2013-10-16T22:17:54.697 回答
0

如果没有代码，这很难为您提供帮助，但这里有一些实用的建议：

我怀疑您的“图像墙”有某种带有 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; }

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

于 2013-10-16T22:32:49.263 回答
0

转到您的 CSS 文件并调整所有图像的大小，如下所示

img {
  width:  100px;
  height: 100px;
}
于 2016-04-20T13:40:18.040 回答
0

使用此 CSS 样式更改您的图像标签。

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
于 2021-09-12T03:44:42.860 回答