我不是一个前端开发者,但我正在写一个简单的单页网站,其中包含一个图像.我已创建此图像的几个版本,以最小化要在小屏幕设备中下载的位.这个图像应该水平“展开”,所以我还创建了一些应该水平重复的背景图像.见下面的模型：
在我写的代码下面.这是正确的方法吗？我的代码中是否有任何错误,或者这是使用视口的正确方法？虽然它在我的320px iPhone屏幕上运行良好,但我无法在我的桌面浏览器上使用320px版本.总的来说,我并不满意.
HTML：
CSS：
最佳答案
看看这支笔：https://codepen.io/anon/pen/XqJRKM
基本上,解决方案是：
#image { background-image: url("http://lorempixel.com/output/sports-h-c-1-480-10.jpg"); background-repeat: repeat; background-size:contain; width: 100vw; background-color:#f00;}@media (min-width: 480px) { #image { background-image: url("http://lorempixel.com/output/sports-h-c-1-480-5.jpg"); background-repeat: repeat; }}@media (min-width: 800px) { #image { background-image: url("http://lorempixel.com/output/sports-h-c-1-480-6.jpg"); background-repeat: repeat; }}@media (min-width: 1200px) { #image { background-image: url("http://lorempixel.com/output/sports-h-c-1-480-7.jpg"); background-repeat: repeat; }}#image img{ width:80vw; height:auto; max-width:1200px;}
HTML：
请注意,使用此示例,original_image.jpg将仅显示在旧浏览器上.它将始终在Chrome v38上方的浏览器上覆盖
