当启用最大宽度时裁剪图像

Question

this WP site的页脚具有3个徽标图像： 图片的原始尺寸非常不同，因此我想限制其放在Operating system: CentOS Linux 7 (Core) Kernel: Linux 3.10.0-862.11.6.el7.x86_64 类中的.NET Core SDK (reflecting any global.json): Version: 2.2.402 Commit: c7f2f96116 Runtime Environment: OS Name: centos OS Version: 7 OS Platform: Linux RID: centos.7-x64 Base Path: /usr/share/dotnet/sdk/2.2.402/ Host (useful for support): Version: 2.2.7 Commit: b1e29ae826 .NET Core SDKs installed: 2.2.402 [/usr/share/dotnet/sdk] .NET Core runtimes installed: Microsoft.AspNetCore.All 2.2.7 [/usr/share/dotnet/shared/Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.2.7 [/usr/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.2.7 [/usr/share/dotnet/shared/Microsoft.NETCore.App] 和max-width：

但是当我这样做时，减小窗口大小后，图像被裁剪了：

该如何解决？

Answer 1

尝试使用以下代码更新CSS

CSS

.wp-image-490 {
    width: 100%;    /* Newly added */
    max-height: 200px;
    max-width: 350px;
}

Answer 2

查看是否可以为第一个徽标添加其他类别（或id），而第二个和第三个徽标则没有。

然后为此类（或ID）添加规则

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

（如上所述，Par Thea）

Answer 3

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

.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;
}