如何使用 CSS 填充和居中图像？答案

【问题标题】：How do I fill and center an image uinsg CSS?如何使用 CSS 填充和居中图像？
【发布时间】：2021-09-24 15:04:27
【问题描述】：

我有一个任意形状和大小的图像，我想在不改变其比例且不截断图像的一部分的情况下将其放大为包含 div。

下面是我想到的图表：

请注意，图像有时垂直居中，有时水平居中。

如果图像总是很宽，我可以使用：

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

但如果图像较窄，这将不起作用，因为它最终会切掉顶部和底部。

有没有办法（可能使用 grid 或 flex）来容纳图像？

【问题讨论】：

如果您的容器为固定大小，请使用object-fit：developer.mozilla.org/en-US/docs/Web/CSS/object-fit。不需要使用 flex/grid。
谢谢@Terry。但是，我花了很长时间才弄清楚我还需要包含object-fit: contain; width: 100%; height: 100%;。从我在网上发现的文档或其他示例中看不到这一点。

标签： css image

【解决方案1】：

将object-fit: contain 用于css 中的img 选择器，

您的 <img> 标签将是您的灰色框架，如上所示。
无论图像的固有大小和<img> 标签的大小如何，都将按照您的意愿托管真实图片。

【讨论】：

【解决方案2】：

感谢@Terry 的评论，我找到了使用object-fit 的解决方案。

    div#container {
      background-color: #123456;
      width: 480px;
      height: 240px;
    }
    div#container>img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    <div id="container">
      <img src="https://javascript101.webcraft101.com/images/photos/large/bromeliad.jpg" alt="Random" title="Random Image">
    </div>

主要特点是：

object-fit 描述了图像在其容器中的位置。在这种情况下，它被完全包含在内，并最终处于过程的中心，同时保持其比例。
width 和height 设置为100%（容器的）。我认为这会迫使图像缩放到容器中。

多么美妙的财产！

【讨论】：