HTML 图像调整大小和缩放而不损失质量

Question

所以我有一个通过 div 定义的水平横幅。这个 div 的宽度是整个窗口的宽度，暂时固定高度为 500px。如何缩放背景图像 (2048 x 1283) 以完全填充 div 而不会损失图片质量？如果 div 高度相对于窗口大小（可能是 25% 或 50%），我将如何做同样的事情？我希望它在调整窗口大小时起作用。

Answer 1

好吧，您永远不会损失图片质量，因为您一直在以不同的尺寸渲染同一张图片。您必须了解响应式背景是一个很难的话题，因为图片永远不会完全按照您想要的方式显示，因为不同的设备将具有不同的显示分辨率，例如，如果您在 iphone 纵向格式中看到相同的响应式图像（垂直）与您在同一设备中看到的横向格式（水平）相比，高度看起来会更小。

这里有一个问题可以帮助您在responsive backgrounds Responsive css background images 的旅程中提供帮助

干杯。

--- 编辑

如果您想获得完整的背景http://css-tricks.com/perfect-full-page-background-image/，请参阅此信息。