Question

如何在div中自动调整图像。我有一个div里面有一个图像。如果图像很大则会占用屏幕的一半。我想要它，以便图像缩小，适合150px左右的div。因此，当图像的高度为150像素时，图像将适合框。如果它更大那么它应该缩小。

我试过了：

.crop {
  height: 150px;
  overflow: hidden;
  position: absolute;
}

但不起作用。我也试过max-width: 1fr`

Answer 1

您可以将尺寸限制应用于图像本身。见下文。希望有所帮助。

＆＃13;

.crop img {
  max-height: 150px;
  width: auto;
}

＆＃13;

<div class="crop">
  <img src="http://via.placeholder.com/350x350">
</div>

＆＃13;

Answer 2

.crop {
    height: 150px;
    max-height:150px
    overflow: hidden;
    position: absolute;
  }

Answer 3

您可以使用object-fit：包含如下： -

 .crop img{
    object-fit:contain;
  }

Answer 4

您必须将height:100%应用于图片

Stack Snippet

＆＃13;

.crop {
  height: 150px;
  overflow: hidden;
  position: absolute;
}

.crop img {
  height: 100%;
}

＆＃13;

<div class="crop">
  <img src="http://via.placeholder.com/600x300" alt="">
</div>

＆＃13;

Answer 5

＆＃13;

.crop {
    height: 150px;
        width: 150px;
    overflow: hidden;
    position: absolute;
  }
        .crop img{
            width: 100%;
        }

＆＃13;

 <div class="crop">
        <img src="https://m.guardtime.com/photos/tech_image.jpg">
    </div>

＆＃13;

Answer 6

因此，当图像的高度为150像素时，图像将会出现装在盒子里。

您可以尝试使用对象

使用object-fit:cover下面的示例将填充.crop容器中的图片。它将保持其纵横比，但通常会裁剪图像。

＆＃13;

.crop{
  height:150px;
  width:150px;
}

img {
  height: inherit;
  width:inherit;
  object-fit: cover;
}

＆＃13;

<div class="crop">
  <img src="http://via.placeholder.com/350x550" alt="">
</div>

＆＃13;

替代方法，如果您只希望图像仅遵循容器的高度并保持其纵横比。你可以使用object-fit:contain。只是不要设置容器的宽度。

＆＃13;

.crop{
  height:150px;
}

img {
  height: inherit;
  width:inherit;
  object-fit: contain;
}

＆＃13;

<div class="crop">
  <img src="http://via.placeholder.com/350x550" alt="">
</div>

＆＃13;

将图片高度修复为150px css

6 个答案: