如何在不拉伸图像的情况下填充图像答案

【问题标题】：How to fill image without stretching the image如何在不拉伸图像的情况下填充图像
【发布时间】：2017-07-06 01:21:41
【问题描述】：

嗨，我正在开发这个 wordpress 网站。我使用 divi 主题，但我使用 css 手动更改内容。

这目前放置在最近的故事部分。

问题是post图片放置正确但是在div里面被拉伸了，看起来很奇怪；图片不应该这么薄。我希望将图像填充到 div 中。这意味着它不需要与 div 的宽度相同，但它必须填充空间。

是否有任何代码解决方案？我尝试了对象拟合，以及最小和最大高度。两者都没有工作..

【问题讨论】：

【解决方案1】：

有多种方法可以使用 CSS 使图像填充 div 元素。最简单的方法是将图像设置为 div 的background-image，并将background-size 设置为cover。你也可以设置background-position来对齐图片。

div {
    background-image: url("image.jpg");
    background-size: cover;
    background-position: center;
}

但在您的情况下，您似乎正在使用 WordPress 插件，该插件将图像作为 img 标记插入 div 内，并将图像拉伸到 div 的大小。所以我们可以使用img 元素上的object-fit CSS 属性来使图像填充img 元素的大小。

您的代码将如下所示。

#tesco-slider .et_pb_slide_image img {
    object-fit: cover;
    object-position: center;
}

与background-image 方法一样，object-fit: cover 将使您的图像填充img 标记的大小，object-position: center 将使图像与中心对齐。

【讨论】：

这确实不以有用的方式回答了这个问题。 为什么你相信这就是答案？如何它是如何工作的？在没有任何上下文或含义的情况下简单地告诉某人更改他们的代码并不能帮助他们了解他们做错了什么，而且对未来的读者也没有用处。
@ThimalW 如果你愿意，我很乐意为你投票。如果有，请在此处回复。
感谢@GrumpyCrouton 的反馈，我会更新我的答案。
@GrumpyCrouton 更新了答案。希望这是一个改进。
@ThmalW 非常感谢。您应该将我的推理应用于您回答的每个问题。我将我的反对票恢复为赞成票，感谢您的编辑。

【解决方案2】：

在css 中使用background-size: cover; 属性作为背景图片

【讨论】：