图像上的 CSS 百分比宽度突然停止工作？

Question

我不知道为什么，但控制图像大小的 CSS（最引人注目的是移动屏幕上主宽屏图像横幅上的标题图像）突然停止工作了？

该网站托管在 Siteground 上，由于某种原因，所有图像的最大宽度现在为 100% 或更少？

如果我设置更大的特定像素宽度，例如，就会发生这种情况。 2900px 或更大的百分比。

这会影响所有图像，包括那些有或没有文本覆盖的图像。

在移动设备上，我通常将宽度设置为 300% +，以便它填充整个面板。

实时网站是 - https://www.hagleyartificiallawns.co.uk/

我已经花了一整天，禁用插件，更改 PHP 版本，弄乱 CSS，但它不再起作用了。昨天和前一周都运行良好 - 我是否错过了一些非常明显的东西？

有什么建议吗？

预先感谢，我想看到这个我会发疯的！ :)

Answer 1

删除图像上的所有宽度分配，以便高度可以随容器缩放：

#topBanner img {
    width: 100%;
}

@min-width: 768px
#topBanner img {
    width: 130%;
}

#overlay img, #fullBanner img {
    /* width: 100%; */
}

html :where(img) {
    max-width: 100%;
}

Answer 2

在 WP 5.9.2 上，includes/css/dist/block-library/style.min.css 具有以下 CSS 声明：

html :where(img){ height: auto; max-width: 100% }

您可以尝试使用替换为文件或使用自定义 css 插件。

html :where(img[class^="wp-image-"]) {
    height: auto;
    max-width: 100%;
}

更多读物请访问

• https://github.com/WordPress/gutenberg/issues/39021
• https://github.com/WordPress/gutenberg/pull/39045