我不是一个前端开发者,但我正在写一个简单的单页网站,其中包含一个图像.我已创建此图像的几个版本,以最小化要在小屏幕设备中下载的位.这个图像应该水平“展开”,所以我还创建了一些应该水平重复的背景图像.见下面的模型：
在我写的代码下面.这是正确的方法吗？我的代码中是否有任何错误,或者这是使用视口的正确方法？虽然它在我的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上方的浏览器上覆盖