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

Question

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

我的大部分图片都是 1920x1080 宽高比，所以一旦屏幕小于 1070px，默认的宽高比应该没问题。对于 1070px 屏幕，图像自动缩放到 1070x600，对于 800px 屏幕，图像自动缩放到 800x450，或者 400x225 用于 400px 屏幕，等等。一切顺利。

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

• 对于 1920 像素的屏幕:将图像裁剪为 1920x600
• 对于 1500 像素的屏幕:将图片裁剪为 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.

有用的链接:

• https://css-tricks.com/responsive-images-css/

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images