Question

嗨，我正在使用这个wordpress网站。我使用divi主题，但我用css手动改变了一些东西。

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

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

有没有针对此的代码解决方案？我尝试了物体贴合，最小和最大高度。两者都没有用..

Answer 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的大小。因此，我们可以使用object-fit元素上的img CSS属性来使图像填充img元素的大小。

您的代码看起来像这样。

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

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

Answer 2

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