我有一个英雄横幅图像的网站。
这是它在桌面上的外观：
这就是它在移动设备上的外观（通过Chrome开发工具）：
正如你所看到的，手机上的图像太窄了，我希望它看起来“更高”。基本上，另一个纵横比是桌面上的纵横比。
我已经探索了几个备选方案，但没有一个奏效，所以不确定什么是最好的方法。我管理的一些备选方案：
1） 从中心到边缘，以不同的纵横比裁剪移动设备的图像。这样，核心信息（大甩卖）看起来就可以了，其余的就不会出现在手机上了（没关系）。我不知道如何做到这一点，而且问题是图像具有srcset，因此这会增加复杂性。
2） 对所有设备使用相同的大图像，但使用最小高度，将图像居中，以便仅显示中心部分。同样的问题是，srcset将显示更小的图像，所以这种方法目前还不起作用。
What\'s the best practice for this? I\'ve read A LOT about custom fields, add_image_size() function, srcset, etc. but so far I can\'t figure this out.
感谢您的帮助。非常感谢！
EDIT: 似乎<picture> 元素是我正在寻找的，但现在我陷入了如何将其与WP上传图像和裁剪过程集成的困境。
SO网友:RiddleMeThis
而不是创建一个新的图像大小或上传一个完全不同的图像只是为了移动你可能想玩object-fit 和object-position CSS。
object-fit 和object-position 工作原理与background-size 和background-position 但它们不是只应用于背景图像，而是作用于<img> 标签
将这些用于媒体查询，您可以指定图像在移动设备上的外观。
退房this Fiddle. 请注意它们是如何使用相同的图像的，但它看起来或多或少在不同的宽度上放大了，这基本上就是您想要做的。
您可以在对象拟合上设置这些不同的值。。。
- fill: 这是拉伸图像以适应内容框的默认值，无论其纵横比如何
- contain: 增大或减小图像大小以填充长方体，同时保持其纵横比
- cover: 图像将填充其框的高度和宽度，再次保持其纵横比，但在此过程中经常裁剪图像
- none: 图像将忽略父对象的高度和宽度，并保留其原始大小
- scale-down: 图像将比较“无”和“包含”之间的差异，以找到最小的具体对象大小
Note: 默认情况下，图像在内容框中居中。您可以通过使用
object-position.
一零
img {
object-fit: none;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}
