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

我希望我的图像保持其全宽和高宽比，直到它们达到600像素的高度，在这一点上它们裁剪高度（并且仍然保持全宽）。这对我来说很棘手，因为我想避免使用

背景图像来实现我的目标

我的大多数图像都是长宽比
1920x1080
的，因此一旦屏幕小于
1070px
，默认的长宽比就可以了。对于
1070px
屏幕，图像自动缩放为
1070x600
；对于
800px
屏幕，图像自动缩放为
800x450
；对于
400px
屏幕，图像自动缩放为
400x225
，依此类推。一切都好

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


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

等等

add_image_size（'jd custom size'，1920，600，true）是不够的，因为在小屏幕上，即800px，它会将图像裁剪为800x250

add_image_size（'jd custom size'，9999600，true）会产生相同的问题

我肯定我不是第一个有这个目标的人，但我不太确定如何用谷歌搜索它。大多数搜索查询只会出现基本的
add\u image\u size
问题

有什么想法吗？
你看过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)');

基于屏幕宽度的检测
 您可以使用新的
srcset
和
size
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

有用链接：




我认为您可以通过首先检测屏幕尺寸最大高度+对象适合度，或者如果容器将图像包裹起来，则仅检测最大高度，从而手动更改图像。。。有任何代码/片段可供分享并显示您的实际问题吗？：）对于html/css部分，您还可以在html中结合srcset来加载另一个imageG Cyr，这正是我所需要的。此线程上的其他响应可以工作，但只能在特定断点处工作。这个一次裁剪1px，直到达到1070px的屏幕，此时我可以关闭高度限制。如果你想发布一个正式的答案，我会把它标记为正确的。我基本上在图像周围设置了一个div，添加了
width:100%；高度：600px到div，然后给出img
宽度：100%；身高：100%；对象匹配：覆盖然后在我现有的1024px媒体查询中，我给出了div
高度：100%
以取消其600px限制，它工作得非常漂亮。