代码改变世界

图片在浏览器中自适应

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);

　　});

 

摘自：自适应网页设计（Responsive Web Design）