如何使图像适合其 div CSS

Question

假设我有以下代码：

img {
  max-widht: 100%;
  max-height: 100%;
}

<div width="500" height="500">
  <img src="https://placehold.it/250x150">
</div>

如果 width 或 height 高于 500 像素，这对所有图像都有效。但是对于较小的图像，图像将不会覆盖 div。有没有一种 CSS 方法可以强制图像至少 width: 100% 或 height: 100% 而不管其原始大小？

编辑： disinfor 的这个解决方案对我有用。

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Answer 1

这样做：

img {
    width: 100%;
    height: auto;
}

较小的图像（在您的例子中，宽度小于 500 像素）没有填满整个 space 的原因是因为 max-width 意味着 "max width of the actual image." 所以如果您使用 width: 100% 相反，图像将填充其容器的 space。

使用 height: auto 将确保图像不会 stretched/distort 垂直。

概念验证：

.normal, .land, .port, .fit {
  height: 200px;
  width: 200px;
}

img {
  width: 100%;
  height: auto;
}

div.land img,
div.port img {
  width: 100%;
  height: 100%;
}

div.fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="fit">
  <img src="https://placehold.it/500x750">
</div>

<div class="fit">
  <img src="https://placehold.it/50x100">
</div>

<div class="normal">
  <img src="https://placehold.it/75x10">
</div>

<div class="normal">
  <img src="https://placehold.it/10x75">
</div>

<div class="land">
  <img src="https://placehold.it/75x10">
</div>

<div class="port">
  <img src="https://placehold.it/10x75">
</div>

Answer 2

img {
    max-width: 100%;
    object-fit: cover;
}

<div width="500" height="500">
    <img src="https://placehold.it/250/150">
</div>

Answer 3

我认为您回答了自己的问题！你有一个Div！ => width:500px 和高度：500 像素！当图像大于此尺寸时，Max-width 和 max-height 可以正常工作！但是当你的图片较小时，max-width 就帮不了你了，因为图片宽度小于 500px！例如，您有一个图像 => width:300px。 max-width:100% 等于 300px！那么您可以像这样更改您的代码：

<div>
   <img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>

但如果您想要响应式图片：

<div style="width:500px;height:500px;">
   <img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>

Answer 4

如果您将图像放在背景中，可以使用 background-size CSS 规则：

css

    .block {
        background: url(my_picture.png) no-repeat 50% 50%;
        background-size: cover;
    }

html

    <div width="500" height="500" class="block"></div>

如何使图像适合其 div CSS

How to make image fit to its div CSS

html

css

image

web-frontend

css

html