Css “最大宽度”处于活动状态时裁剪的图像

的页脚有3个徽标图像： 图像的原始尺寸非常不同，因此我想限制其

max width

和

max height

，我将其放入

wp-image-490

类中：

但当我这样做时，在缩小窗口大小后，图像会被裁剪：

---

如何修复此问题？

尝试使用以下代码更新css

CSS

---

看看是否可以为第一个徽标添加第二个和第三个徽标没有的其他类（或id）

然后为这个类（或id）添加规则

<your class/id> {
    width: 100%;
}

{
宽度：100%；
}

---

（如上所述）

解决了在类中插入以下元素时提到的问题：

.wp-image-490 {
    object-fit: contain; /* fix the image distortion caused by "width: 100%" */
    width: 100%; /* fix the image cropping caused by "max-width" */
    max-height: 200px;
    max-width: 350px;
}

---

这会在增加屏幕大小时使第二个图像变形。。。你已经测试过了吗？谢谢，但我找到了一个解决方案。这些徽标来自用户生成的表，因此我无法控制每个元素，因此，不可能为特定的图像设置特定的类。ao徽标图像必须只有一个通用类。是否有更高级别的类可以编辑？例如在.Rtable单元格元素中？在这种情况下，您仍然可以对该类下面的徽标使用不同的规则。如果没有，我可以想到的最后一个解决方案是您使用：img[src=“{width:100%；}这确实不太好，而且只有在您确定徽标的src url没有更改的情况下才有效。谢谢，但我找到了一个解决方案。

.wp-image-490 {
    object-fit: contain; /* fix the image distortion caused by "width: 100%" */
    width: 100%; /* fix the image cropping caused by "max-width" */
    max-height: 200px;
    max-width: 350px;
}