移动设备上的全屏图像缩放

Question

我正在开发一个网站，该网站的主页由标题（大约 200 像素高度）和全屏滑块（占用浏览器中的剩余空间）组成。像往常一样，在桌面和平板电脑视图上一切都很好，但我似乎无法为移动设备获得正确的比例。图像是通过背景图像属性设置的，我已经使用了背景大小、最大宽度、高度、溢出等属性，但我完全没有想法。我可以通过 max-width: 100%, height: auto, background-size: cover 等保持适当的比例，但我最终在图像底部有空白区域。

此外，所使用的图像最初（目前）为 1500 x 600，因此即使按比例移动缩放，图像中的内容也变得难以阅读。

You can see the site here

我在网上搜索过，但还没有真正找到合适的答案，而且我不知道如何正确缩放这些图像以及继续让它们占用浏览器中的剩余空间 - 所有同时保持图像的焦点区域以内容为中心。我知道 JS 插件可以帮助解决这个问题，但我选择了 CSS 方法，因为图像将来自 WordPress 上传。

我被困住了，所以社区的任何反馈都将不胜感激！

Answer 1

为容器中的图像位置设置媒体查询

在css中

@media 仅屏幕和（最大宽度：40em）{

.hero-slide.slick-slide {

background-size: contain;

}

}

Answer 2

在玩了更多之后，我将实现一个有桌面图像和移动图像的系统。不是我想做的事情，而是在这种情况下最好的事情。