html– 正确使用背景图像的媒体视口_html-js-css

概述我不是一个前端开发者,但我正在写一个简单的单页网站,其中包含一个图像.我已创建此图像的几个版本,以最小化要在小屏幕设备中下载的位.这个图像应该水平“展开”,所以我还创建了一些应该水平重复的背景图像.见下面的模型：在我写的代码下面.这是正确的方法吗？我的代码中是否有任何错误,或者这是使用视口的正确方法？虽然它在我的320px iPhone屏幕上运行良好,但我无

我不是一个前端开发者,但我正在写一个简单的单页网站,其中包含一个图像.我已创建此图像的几个版本,以最小化要在小屏幕设备中下载的位.这个图像应该水平“展开”,所以我还创建了一些应该水平重复的背景图像.见下面的模型：

在我写的代码下面.这是正确的方法吗？我的代码中是否有任何错误,或者这是使用视口的正确方法？虽然它在我的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上方的浏览器上覆盖          总结       
以上是内存溢出为你收集整理的html  – 正确使用背景图像的媒体视口全部内容，希望文章能够帮你解决html  – 正确使用背景图像的媒体视口所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119468.html

html– 正确使用背景图像的媒体视口

发表评论

评论列表（0条）