Question

我希望我的图像保持其全宽和纵横比，直到它们达到600px高度，此时它们会裁剪高度（并且仍然保持全宽）。这对我来说很棘手，因为我想避免使用background-image来实现我的目标。

我的大部分图片均为1920x1080宽高比，因此一旦屏幕小于1070px，默认宽高比应该没问题。对于1070x600屏幕，图片会自动缩放至1070px，对于800x450屏幕，图片会自动缩放至800px，对于400x225屏幕，图片会自动缩放至400px，依此类推。一切都好。

但是一旦屏幕大于1070px，默认的宽高比就不再适用于我，因为高度超过600px。我希望图像在此时自动裁剪到600px高度，保持整个宽度不变：

对于1920px屏幕：将图像裁剪为1920x600
对于1500px屏幕：将图像裁剪为1500x600

等等。

add_image_size( 'jd-custom-size', 1920, 600, true );还不够，因为在小屏幕上，即800px，它会将图像裁剪为800x250。

add_image_size( 'jd-custom-size', 9999, 600, true );会产生同样的问题。

我确定我不是第一个有这个目标的人，但我不太确定如何谷歌。大多数搜索查询只会显示基本的add_image_size个问题。

有什么想法吗？

Answer 1

您可以使用新的srcset和sizes html属性来实现这一目标，只需为您想要的每种分辨率传递裁剪后的图像src：

<img srcset="yourimage-320h.jpg 320h,
             yourimage-480w.jpg 480w,
             yourimage-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (min-width: 480px) 440px,
            800px"
     src="yourdefaultimage-800w.jpg">

您可以设置所需的任何单位w，h表示真实图片width和真实图片height。

有用的链接：

Answer 2

您是否看过使用CSS剪辑，将其与媒体查询结合使用，解决方案可能只是css。

@media only screen and (min-width : 1500px) {
.myimg{
    position: absolute;
    clip: rect(0px,1500,600px,0px);
}
}

@media only screen and (min-width : 1960px) {
    .myimg{
        position: absolute;
        clip: rect(0px,1960,600px,0px);
    }
    }

或者你可以使用javascript来更具体地设置

$(".myimg").css("clip",'rect(0px,1960,600px,0px)');

基于宽度的屏幕检测？

如何保持全宽图像宽高比直到特定高度，但然后裁剪高度？

2 个答案: