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

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

我想做一个高度和宽度为100px 的 div，然后填充它。不知道该怎么做。

我该怎么做呢？

474159 次浏览
小开

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

在 css 中使用 img 元素

这里是帮助你的 CSS 代码

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

如果要通过 div 设置大小

用这个

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

通过这个代码，您的图像显示在原始大小，但显示第一个100x100px 溢出将隐藏

小开
最佳答案

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

小开

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

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

例如:

<body>


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


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

如果你的代码设置类似于上面的内容，那么在不影响其他图像(比如你的 logo 等)的情况下，为你的图像墙设置一个大小的样式是很容易的。

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

但是，如果你的图像不是完全正方形，他们将倾斜使用这种方法。

小开

如果你把图像扭曲得太厉害了，比如把它们从比例中去掉，它们可能看起来不对,-一点点就可以了，但是一个方法是把图像放在一个“容器”里，把容器设置为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;
}

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

小开

对于那些使用 鞋带并且不想失去响应性的人来说，不要设置容器的宽度。下面的代码是基于 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;
}
小开

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

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

我正在寻找一个解决同样问题的办法，创建一个标志列表。

我想出了这个解决方案，它使用了一点儿 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%;
}
}

附注: 您可能需要添加一些前缀或使用自动前缀。

小开

你可以这样做:

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

基于 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;
    

}

小开

最简单的方法-这将保持图像的大小，因为它是和填充其他区域的空间，这样所有的图像将采取相同的指定空间，无论图像大小没有拉伸

.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 的正方形组成。

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

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

小开

用这种 CSS 样式更改您的图像标记。

img {
float: left;
width:  100px;
height: 100px;
object-fit: cover;
}

提交答案