我有一个宽度为 30% 并包含背景图像的 div。图片本身约为 500px x 300px。当浏览器足够宽时，30% 宽的 div 约为 500px，整个图像显示效果很好，没有裁剪或拉伸(stretch)。但是当视口(viewport)很窄并且那个 div 缩小到 300px 时，500px 的图像正在被裁剪。有没有办法拍摄大图像并将其强制放入较小的容器中而不会裁剪且不会损失纵横比？如果不是，在切换图像的媒体查询断点之间不裁剪或丢失宽高比的情况下，保持图像填充 div 的正确方法是什么？
最佳答案
如果您使用的是 img 元素，这已经得到解答:
Is there an equivalent to background-size: cover and contain for image elements?
但是如果你想坚持使用 CSS 并使用 background-image:url('...');
只需将 background-size 设置为 background-size: contain;。
关于css - 小 div 内的大图像，没有裁剪或纵横比变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44706408/