我在一个网站上工作，该网站的主页由标题(高度约 200 像素)和全屏 slider (占据浏览器的剩余空间)组成。像往常一样，在桌面和平板电脑 View 上一切都很好，但我似乎无法为移动设备获得正确的比例。图像是通过背景图像属性设置的，我已经尝试过背景大小、最大宽度、高度、溢出等属性，但我完全没有想法。我可以通过 max-width: 100%, height: auto, background-size: cover 等保持适当的比例，但我最终在图像底部留下了空白空间。
除此之外，所使用的图像最初(目前)为 1500 x 600，因此即使移动设备按比例缩放，图像中的内容也变得难以阅读。
我在网上搜索过，但还没有真正找到合适的答案，而且我不知道如何正确缩放这些图像，以及如何继续让它们占用浏览器中的剩余空间——所有同时保持图像的焦点区域以内容为中心。我知道 JS 插件可以帮助解决这个问题，但我选择了 CSS 方法，因为图像将来自 WordPress 上传。
我被卡住了，所以来自社区的任何反馈都将不胜感激!
最佳答案
set media query for image place in the container
在 CSS 中
@media only screen and (max-width: 40em){
.hero-slide.slick-slide {
background-size: contain;
关于html - 移动设备上的全屏图像缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34347314/