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

2024-05-06 • 问答

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：

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

该如何解决？

kxp1125 回答：当启用最大宽度时裁剪图像

尝试使用以下代码更新CSS

CSS

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

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

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

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

（如上所述，Par Thea）

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

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

crop css height width wordpress

本文链接：https://www.f2er.com/3144254.html

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

kxp1125 回答：当启用最大宽度时裁剪图像

大家都在问