WordPress Divi 主题博客模块精选图片剪裁

Question

我正在努力防止 Divi 博客模块的特色图片被剪裁。参见 https://westorlandowp.org/meetups/。附上截图。剪裁发生在特色图像的左边缘。我在 Divi 中没有看到任何用于执行此操作的控件，并且我尝试了一些 CSS 方法来查看是否可以强制图像不被剪裁。首先，我确实将其添加到博客模块的特色图片 CSS 框中：

object-fit: cover;
object-position: 50% 50%;

所以 Divi 渲染的 CSS 代码结果是：

.et_pb_blog_0 .entry-featured-image-url img {
    object-fit: cover;
    object-position: 50% 50%;
}

但这并没有导致修复。不知道如何处理这个问题。谢谢

Answer 1

这不是 CSS 问题，而是 wordpress 配置问题，图像文件被裁剪了。

当您通过图库界面通过Wordpress上传图片时，Wordpress会生成多个版本的图片（原始图片也会上传）。

您首页显示的图片url是：

https://westorlandowp.org/wp-content/uploads/2020/03/407_image_highres_489948485-1080x675.jpeg

看文件扩展名前面的结尾有-1080x675这表明这不是原始图像，而是Wordpress创建的生成（裁剪）版本。

原图位于：

https://westorlandowp.org/wp-content/uploads/2020/03/407_image_highres_489948485.jpeg

查找有关如何更改已上传媒体的默认 wordpress 设置的信息here

如果 Wordpress 媒体设置被忽略怎么办？

您使用的主题可以在您上传图片时更改/删除/添加 新尺寸，这可能会有问题，但是您可以检查和编辑您的主题。

通常您需要检查主题的 functions.php 文件。

在此文件中查找：

add_image_size(

或

update_option(

如果您找到这些行并想要编辑它们，请对您的主题文件进行完整备份（特别是 functions.php 因为您想要编辑它）。

然后查看 documentation (and here) 以了解您可以做什么。

通常要禁用 裁剪，您需要编辑第 4 个参数并将其设置为 false

// The definition of the function, copied from the documentation
add_image_size( string $name, int $width, int $height, bool|array $crop = false )

WordPress Divi 主题博客模块精选图片剪裁

WordPress Divi theme blog module featured image clipped

css

wordpress

wordpress-theming

divi

如果 Wordpress 媒体设置被忽略怎么办？