如何保持全宽图像的高宽比，直到特定的高度，但随后的作物高度？

问题描述：

我希望我的图像保持其全宽和纵横比，直到它们达到600像素的高度，此时他们裁剪高度（并仍保持全宽）。这对我来说很棘手，因为我想避免使用background-image来实现我的目标。如何保持全宽图像的高宽比，直到特定的高度，但随后的作物高度？

我的大部分图像都是1920x1080纵横比，所以一旦屏幕变得比1070px小，默认的纵横比应该没问题。对于1070px屏幕，图像可以自动缩放为1070x600，对于800px屏幕，图像可以自动缩放为800x450，对于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问题。

任何想法？

我觉得你可以通过检测第一屏幕尺寸 – DaFois

最大高度+对象配合dinamically改变形象，或只是最大高度，如果一个容器包装他们...任何代码/片段分享和展示你的实际问题？ :)为html/css的一部分，否则你也有http://php.net/manual/en/function.imagecrop.php结合srcset在HTML也可能是有用的加载替代图像 –

G-Cyr，这是正是我需要的。此线程上的其他响应可以工作，但仅限于特定的断点。这个作物每次作物1px，直到达到1070px的屏幕，此时我可以关闭高度限制。如果您想发布正式答案，我会将其标记为正确。我基本上在图像周围设置了一个div，添加了'width：100％; height：600px;'给div，然后给img'width：100％;身高：100％;然后在我现有的1024像素媒体查询中，我给了div'height：100％;'来移除它的600像素限制，它的效果非常好。 – John

答

你看过使用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和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。

如何保持全宽图像的高宽比，直到特定的高度，但随后的作物高度？

相关推荐