弹性图片,让图片随视口缩放

发布日期:2015-07-29 15:14:02
弹性图片,让图片随视口缩放
在现代浏览器(包括IE 7+)中要实现图片随着流动布局相应缩放非常简单。只需在CSS
中作如下声明:
img {
max一width:100%;
}
这样就可以使图片自动缩放到与其容器100%匹配。更进一步,可以将同样的样式应用到其他多媒体标签上。如:
img,object,video,embed {
max一width:100%;
}
这些多媒体元素都可以自动缩放了。但是,对于采用的<iframe>显示视频的网站(比如YouTube),这个技术还不行,我们会在以后解决这个间题。眼下,还是专注于图片的缩放间题吧,因为不论何种多媒体元素,原理都是相通的。
使用这种方法有几个需要斟酌的问题。第一,要提前准备一张足够大的图片,以备大视口使用。但这也就引出了第二个,同时也是非常重要的问题,即无论视口多大,什么设备,都得下载超大图片。可能对某些设备来说,图片大小只要原始图片的25%就好了。另外,在某些情况下,你还不得不因此而考虑带宽限制。我们呆会儿再说第二个问题,先把图片缩放问题说完。
尽管我在CSS文件中给img元素追加了Max-width:100%声明,但是没看到什么变化,图片没有按我预想的方式随着视口变化而变化:
原因是我在标签中指定了图片的宽度和高度:
<img src="img/wyattEarp.jpg" alt="Wyatt Earp" width="99" height="135"/>
又犯了一个低级错误!修改对应的图片标签,删除宽度和高度属性:
<img arc="img/wyattEarp.jpg" alt="Wyatt Earp"/>
修改确实起效了!但却引入了另外一个问题。因为图片被缩放至其包裹元素宽度的100%,所以每张图片都填满了侧边栏。同样,解决这个问题的方法有很多……
如果本文对你用,可以收藏北京网站建设官网。本文地址:http://www.mcykj.com/blog/article.php?name=20150729151533转载请注明出处!

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计