在图像上使用 CSS object-fit:contain 会在其周围留下空白答案

【问题标题】：Using CSS object-fit:contain on image leaves blank spaces around it在图像上使用 CSS object-fit:contain 会在其周围留下空白
【发布时间】：2021-10-24 23:15:48
【问题描述】：

我有一个容器 image-wrapper 和其中的图像。

容器具有固定的高度和宽度。在其中，图像分辨率将是动态的。

我要做的就是将图像水平和垂直居中放置在容器中，并对其应用一些box-shadow 样式。

但它在图像周围留下了一个空白区域，看起来很奇怪。下面是代码。垂直图像也会发生这种情况。

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0,200,100);
  padding: 40px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

我只想在图像周围有一个阴影，没有空格。我想我在这里遗漏了一件非常简单的事情。

我尝试将position: relative 添加到容器中，但没有成功。

我尝试通过搜索“css 对象适合图像阴影”、“css 对象适合图像添加空格”之类的内容进行搜索，但没有找到任何内容类似。

【问题讨论】：

object-fit:cover 而不是包含
@TemaniAfif 不应从任何一侧裁剪图像。我不能使用它。我本来打算用作背景图片，但要求发生了变化。
从图片中删除 height:100%

标签： html css object-fit

【解决方案1】：

我没有裁剪和使用 Flexbox 的解决方案：

.image-wrapper {
  height: 100%;
  width: 500px;
  background-color: rgb(0,200,100);
  padding: 40px;
  display : flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper img {
  width: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

【讨论】：

我会试一试，并会给你一个更新。
嗨@AnthonyBeaumecker 我试过了，它适用于问题中的这张图片。但是如果图像是垂直的，比如500x1000，它就会溢出容器。
我使用高度为 1000 像素的图像进行了编辑。成功了
是的，它确实有效！唯一的缺点是它有一个固定的宽度。我必须弄清楚我是否可以解决这个问题。再次感谢。

【解决方案2】：

从.image-wrapper img 中删除height: 100%; 和object-fit: contain;

另外，从.image-wrapper 中删除height: 400px;。

使用 CSS Grid 居中图像：（顺便说一句，在这种情况下不需要居中）

display: grid;
place-items: center;

.image-wrapper {
  width: 500px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: grid;
  place-items: center;
}

.image-wrapper img {
  width: 100%;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

一些有用的资源：

【讨论】：

不不，不应该裁剪图像。它应该显示容器内的完整图像。并且还应该居中对齐。
@DebsmitaPaul 那么图像将不正确！
你看，object-fit: contain 就是这样做的，我的意思是它在不扭曲图像的情况下居中对齐图像，保持它的纵横比。它的形状正确，但不是盒子阴影。 :(
@DebsmitaPaul 你用的图片是500x200，盒子的大小是400x400，那你怎么让它们相等
@DebsmitaPaul 我已经更新了它，正如你所说的 ?...现在 box-shadow 的大小是图像的大小

【解决方案3】：

考虑这个解决方案：

根据要求，

容器具有固定的高度和宽度。因此，在.image-wrapper 类中添加了以下内容

      height: 400px;
      width: 400px;

图像将在容器中居中，水平和垂直。因此，将以下内容添加到类.image-wrapper

      display: flex;
      align-items: center;
      justify-content: center;

为了防止在添加 box-shadow 时图像周围出现空白，而不是 height 和 width，在 img 中添加了 max-height 和 max-width。这将防止图像的高度和宽度超过 400px 父级，并且图像的纵横比也将保持不变。

      max-width: 100%;
      max-height: 100%;

总的来说，这是解决方案：

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

【讨论】：