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

问题描述 投票：0回答：15

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

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

我怎样才能做到这一点？

html image css resize
15个回答
270
投票

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

46
投票

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

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

}
38
投票

我可以补充一下，如果你的图像扭曲太多，即不按一定比例，它们看起来可能不正确，-少量就可以，但一种方法是将图像放入“容器”中'并将容器设置为 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;
}

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

28
投票

您可以使用 

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

3
投票

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

样式.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;
}
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%;
}
3
投票

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

.ImageStyle{

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

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

1
投票

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

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

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

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+ */
}
1
投票
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

您将使图像大小与 div 相同，并且您可以使用 bootstrap grid 相应地操作 div 大小

1
投票

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

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

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

在CSS中使用img元素

这是对您有帮助的CSS代码

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

如果你想通过div设置大小

用这个

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

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

0
投票

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

img {
  width:  100px;
  height: 100px;
}
0
投票

查看我遇到的同样问题创建了此代码片段，让我知道是否适合您...

.filledwidth.flex .img img{object-fit:cover;}

.img {
  display: flex;
  width: 150px;
  background: red;
  height: 150px;
  overflow: hidden; /* Ensure images don't overflow */
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Maintain aspect ratio while fitting */
}

.flex {
  display: flex;
  gap: 10px;
}
<div class="flex">
  <div class="img"><img src="https://i.imgur.com/tI5jq2c.jpeg"></div>
  <div class="img"><img src="https://i.imgur.com/37w80TG.jpg"></div>
  <div class="img"><img src="https://i.imgur.com/B1MCOtx.jpg"></div>
</div>

<div class="flex filledwidth">
  <div class="img"><img src="https://i.imgur.com/tI5jq2c.jpeg"></div>
  <div class="img"><img src="https://i.imgur.com/37w80TG.jpg"></div>
  <div class="img"><img src="https://i.imgur.com/B1MCOtx.jpg"></div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.