image-resizing - PageSpeed 模块打乱了图像的比例

Question

Pagespeed 模块更新此图像以调整其大小，但在此过程中它弄乱了比例。有没有办法保持比例并调整它的大小？ (类似于裁剪图片)

图像上的CSS是:
高度:100%；
宽度:768px；
适合对象:覆盖；

Answer 1

To report the rendered dimensions back to the server, this filterinjects JavaScript code to your pages which beacon the sizes back.

您拥有的任何使用 object-fit: cover; 的图像都会让 Pagespeed 极度混淆。毕竟，图像的可见部分会根据屏幕大小而变化，因此 Pagespeed 的信标甚至不可能准确测量并正确猜测如何裁剪和调整大小。

禁用过滤器是否可以解决您的问题？ https://www.modpagespeed.com/doc/reference-image-optimize#resize_rendered_image_dimensions

ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions

编辑:您可能还想尝试用背景图像 CSS 替换 。它在功能上应该是相同的，但我怀疑 Pagespeed 将有更好的时间来正确解释它。