首页 文章

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

提问于
浏览 次
0

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

我的大多数图像都是 1920x1080 宽高比，所以一旦屏幕小于 1070px ，默认的宽高比应该没问题 . 对于 1070px 屏幕，图像自动缩放至 1070x600 ，对于 800px 屏幕，图像自动缩放至 800x450 ，对于 400px 屏幕，图像自动缩放至 400x225 ，依此类推 . 都好 .

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

  • For 1920px screens: 将图像裁剪为1920x600

  • For 1500px screens: 将图像裁剪为1500x600

等等 .

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

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

我'm sure I'不是第一个有这个目标的人，但我不太确定如何谷歌它 . 大多数搜索查询只会出现基本的问题 .

有任何想法吗？

php html css wordpress

2 回答

  • 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 .

    有用的链接：

    回复于
  • 0

    你有没有看过使用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)');

    基于屏幕检测宽度？

    回复于

相关问题