如何设置图片自适应容器大小
如何设置图片自适应容器大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="author" content="MarVel" />
<script type="text/javascript">
/* <![CDATA[ */
window.onload = function(){
var imgView = document.getElementById("imgView");
var simg = imgView.getElementsByTagName("img")[0];
var simg_w = parseInt(simg.clientWidth);
var simg_h = parseInt(simg.clientHeight);
if (simg_w > 200 || simg_h >200 ){
if (simg_w > simg_h){
simg.style.width = "200px";
simg.style.height = "auto";
}
else if(simg_h > simg_w) {
simg.style.height = "200px";
simg.style.width = "auto";
}
}
}
/* ]]> */
</script>
<style type="text/css">
/* <![CDATA[ */
#imgView {position:absolute; width:200px; height:200px; border:3px solid #333; left:50%; top:50%; margin-top:-100px; margin-left:-100px;}
/* ]]> */
</style>
</head>
<body>
<div id="imgView"><img src="http://www.tu51.cn/katong/jiafeimao/jfmd28.jpg" /></div>
</body>
</html>
