我正在一个网站上，主页包含一个标题（大约200像素高）和全屏滑块（占用浏览器中的剩余空间）。像往常一样，桌面和平板电脑视图都很好，但我似乎无法使移动设备的比例正确。图像是通过background-image属性设置的，我已经玩过背景大小，最大宽度，高度，溢出等属性，我完全没有想法。我可以通过最大宽度保持适当的比例：100％，高度：自动，背景大小：封面等，但我最终在图像底部留有空白区域。
除此之外，所使用的图像最初为1500 x 600（现在），因此即使按比例移动缩放，图像中的内容也难以阅读。
我在网上搜索并没有真正找到合适的答案，我对如何正确缩放这些图像以及继续让它们占用浏览器中剩余空间的想法 - 所有同时保持图像的焦点区域以内容为中心。我知道JS插件可以帮助解决这个问题，但我选择了CSS方法，因为图像将来自WordPress上传。
我被困住了，所以社区的任何反馈都会受到赞赏！
答案 0 :(得分：0)
为容器中的图像位置设置媒体查询
在css中
仅@media屏幕和（max-width：40em）{
.hero-slide.slick-slide {
background-size: contain;
}
}
答案 1 :(得分：0)
经过更多的游戏后，我将实现一个系统，其中有桌面图像和移动图像。不是我想做的，而是在这种情况下最好的事情。