HTML 在不损失质量的情况下调整图像大小和缩放
HTML Image resizing and scaling without loss of quality
所以我有一个通过 div 定义的水平横幅。此 div 的宽度为完整的 window,暂时固定为 500px 的高度。如何缩放背景图像 (2048 x 1283) 以完全填充 div 而不会损失图片质量?如果 div 高度相对于 window 大小,可能是 25% 或 50%,我将如何做同样的事情?我希望它在调整 window 大小时起作用。
好吧,你永远不会损失图片质量,因为你一直在用不同的尺寸渲染同一张图片。你必须明白响应式背景是一个很难的话题,因为图片永远不会完全按照你想要的方式显示,因为不同的设备会有不同的显示分辨率,例如,如果你在 iphone 肖像中看到相同的响应式图像格式(垂直)的高度看起来比您在同一设备中看到的横向格式(水平)要小。
这是一个可以帮助您 responsive backgrounds
Responsive css background images
旅程的问题
干杯。
--- 编辑
如果你想实现完整的背景http://css-tricks.com/perfect-full-page-background-image/请参阅此信息。
所以我有一个通过 div 定义的水平横幅。此 div 的宽度为完整的 window,暂时固定为 500px 的高度。如何缩放背景图像 (2048 x 1283) 以完全填充 div 而不会损失图片质量?如果 div 高度相对于 window 大小,可能是 25% 或 50%,我将如何做同样的事情?我希望它在调整 window 大小时起作用。
好吧,你永远不会损失图片质量,因为你一直在用不同的尺寸渲染同一张图片。你必须明白响应式背景是一个很难的话题,因为图片永远不会完全按照你想要的方式显示,因为不同的设备会有不同的显示分辨率,例如,如果你在 iphone 肖像中看到相同的响应式图像格式(垂直)的高度看起来比您在同一设备中看到的横向格式(水平)要小。
这是一个可以帮助您 responsive backgrounds
Responsive css background images
干杯。
--- 编辑
如果你想实现完整的背景http://css-tricks.com/perfect-full-page-background-image/请参阅此信息。