flexbox 和 google pagespeed insights 图片优化有冲突？

Question

我尝试使用页面速度洞察优化页面 https://terma-pl.com.ua/polotentsesushiteli-v-vannuyu 上的图片，目前有 3 张图片需要优化。但是 google 提供了一些奇怪的图像。它们在优化后改变了它们的形式，即使我设置了图像的宽度和高度属性和样式......如果我从父块中删除 flex，google 提供正常图像，这是什么问题？

在 flex 块中的示例我有一个 p 和 img:

<div class="flexBlock">
<p>...</p>
<img src="/images/001Polotencesysh/colori-ral.jpg" width="250" height="250" 
style="width: 250px; height:250px; flex-basis: 250px;">
</div>

.flexBlock {
display: flex;
align-items: center;
}

压缩前后图片：

Answer 1

弹性项目的初始设置是 flex-shrink: 1。这意味着允许项目缩小。

要禁用此功能，请将 flex-shrink: 0 添加到您的内联样式。