图片在浏览器中自适应
2012-05-15 18:04 呦菜 阅读(332) 评论(0) 编辑 收藏 举报代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片在浏览器中自适应</title> <script type="text/javascript"> </script> <style type="text/css"> img{ width: 100%; max-width:100%; -ms-interpolation-mode: bicubic; } </style> </head> <body> <div> <img src="file:///C|/Users/Public/Pictures/Sample Pictures/Hydrangeas.jpg"> </div> </body> </html>
效果图如下:
实现图片的自适应:这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});