彩运网网址-彩运网网上登录

好用的几种常用的响应式设计让图片自适应的办

现在移动互联网日新月异,各种移动设备层出不穷,在iPhone 4上最先出现视网膜屏幕后,这种技术快速的被大多数智能移动设备所采用,可以遇见将会快速的普及开来。

Ethan Marcotte曾经在A List Apart上发表过一篇名为“Responsive Web Design”的文章,他当时就提出了响应式架构的概念(不少混迹技术圈的肯定看过这篇文章,这里就不再赘述了)。随着终端设备的日益丰富,无法针对设备类型、尺寸或浏览器进行自适应调整的图像会严重减慢网站的访问速度,最终导致用户流失。

 彩运网网址 1

一,谈到图片自适应,很多前端开发人员会不假思索的来一句“宽度100%”

        但是这也对我们的Web提出了更高的要求,因为我们需要适配更为复杂的UI方案。

例如:

        适配图像将会是响应式网络设计下一个需要解决的问题,因为我们针对不同分辨率的屏幕,例如iPhone 4s和iMac,最佳的方案是分别提供不同的图像。因为为低分辨率的屏幕提供高分辨率图像浪费带宽并影响下载速度,而为高分辨率的屏幕提供低分辨率图像又非常影响体验。

 1 <html>
 2   <head>
 3     <style>
 4       html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
 5       .imgBox, .imgBox img{width:100%;height:100%;}
 6     </style>
 7   </head>
 8 <body>
 9   <div class="imgBox">
10     <img src="1.jpg" />
11   </div>
12 </body>
13 </html>

        HTML5规范正在讨论分辨率图像的原生适配支持,其中一种比较可靠的方案如下:

<html>
  <head>
    <style>
      html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
      .imgBox, .imgBox img{width:100%;height:100%;}
    </style>
  </head>
<body>
  <div class="imgBox">
    <img src="1.jpg" />
  </div>
彩运网网址,</body>
</html>

[html] 
<img src="foo-lores.jpg" 
     srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x" 
     alt="decent alt text for foo."> 
        这种方式为img标签引入了一个新的srcset属性,通过2x和6.5x这种形式来告诉浏览器屏幕相对分辨率所采用的适配图像。请注意我们并没有使用媒介查询Media Query。

精髓可以是这样一行CSS代码:

        另外与此类似的image set方案(作为CSS4的一部分)已经被添加到WebKit里,示例如下:

1 img{ width:100%;height:auto;max-width:100%;display:block;}

[html] 
selector { 
    background: image-set(url(foo-lowres.png) 1x, 
        url(foo-highres.png) 2x) center; 

        srcset方案目前还在讨论和完善中,但是可以预见,我们将会有一个可靠的技术方案和标准。

img{ width:100%;height:auto;max-width:100%;display:block;}

     作者:hfahe

如果背景图片,就用background-size,例如:
为canvas标签增加自定义背景:

http://www.bkjia.com/HTML5/477456.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/477456.htmlTechArticle现在移动互联网日新月异,各种移动设备层出不穷,在iPhone 4上最先出现视网膜屏幕后,这种技术快速的被大多数智能移动设备所采用,可...

1 #myCanvas {
2   background-image: url(${webRoot }/webpage/weixingency.jpg);
3   background-size: 100%;
4 }

 

#myCanvas {
  background-image: url(${webRoot }/webpage/weixingency.jpg);
  background-size: 100%;
}
注:url中是图片的路径,大家需自行修改。

本文由彩运网网址发布于网络安全,转载请注明出处:好用的几种常用的响应式设计让图片自适应的办

相关阅读