html图片自适应大小问题 30
下面这段代码，在浏览器中运行，会出现两个问题：1：无论你将页面放大还是缩小，图片的宽度和高度始终都没有变化，但从视觉上是放大或缩小了，这是为什么？2：图片因为始终保持着宽...
下面这段代码，在浏览器中运行，会出现两个问题：
1：无论你将页面放大还是缩小，图片的宽度和高度始终都没有变化，但从视觉上是放大或缩小了，这是为什么？
2：图片因为始终保持着宽度和高度不变，所以在放大时，老是溢出，导致页面布局混乱不堪，怎么解决？
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
function resizeImage(){
var x=$("#one").width();
var y=$("#one").height();
alert("第一张图片的宽度："+x+"\n"+"第一张图片的高度："+y);
}
</script>
<style type="text/css">
img{width:360px;height:480px;}
</style>
</head>
<body onload="resizeImage()">
<div class="out">
<ul class="list">
<li id="on1" class="ssOne"><img src="http://img.xiuren.com/taotu/437/samples_o/0013.jpg" id="one" alt="图片3" class="image one" /></li>
<li id="on2" class="ssTwo"><img src="http://img.xiuren.com/taotu/287/samples_o/0009.jpg" alt="图片4" id="two" /></li>
<li id="on3"class="ssThree"><img src="http://img.xiuren.com/taotu/437/samples_o/0021.jpg" id="three" class="three" alt="图片5" /></li>
</ul>
<div class="empty"></div>
</div>
</body>
</html> 展开
1：无论你将页面放大还是缩小，图片的宽度和高度始终都没有变化，但从视觉上是放大或缩小了，这是为什么？
2：图片因为始终保持着宽度和高度不变，所以在放大时，老是溢出，导致页面布局混乱不堪，怎么解决？
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
function resizeImage(){
var x=$("#one").width();
var y=$("#one").height();
alert("第一张图片的宽度："+x+"\n"+"第一张图片的高度："+y);
}
</script>
<style type="text/css">
img{width:360px;height:480px;}
</style>
</head>
<body onload="resizeImage()">
<div class="out">
<ul class="list">
<li id="on1" class="ssOne"><img src="http://img.xiuren.com/taotu/437/samples_o/0013.jpg" id="one" alt="图片3" class="image one" /></li>
<li id="on2" class="ssTwo"><img src="http://img.xiuren.com/taotu/287/samples_o/0009.jpg" alt="图片4" id="two" /></li>
<li id="on3"class="ssThree"><img src="http://img.xiuren.com/taotu/437/samples_o/0021.jpg" id="three" class="three" alt="图片5" /></li>
</ul>
<div class="empty"></div>
</div>
</body>
</html> 展开
展开全部
感觉上放大或者缩小是你心里的作用，这个和布局一样，就跟你在家用个22寸的显示器和你去商场看个22寸的显示器一样，大小没有变，但是周围的环境大了所以你会感觉大小变了
至于老溢出的话有两种解决办法：
你可以设置图片的宽度为100%，这样图片就可以根据你的屏幕大小改变宽度了
你可以设置包在图片外部的div为100%，然后设置overflow:hidden；的属性，这样图片大了之后就会溢出隐藏，不会搞乱你的布局了
更多追问追答
追问
你的方法我是知道的，但是不行啊！不信，你可以试试将图片进行整体左浮动，然后外部div宽度100%，内部宽度设置一个固定宽度1600px，然后在图片区的的上方再加个导航框，用同样的设置，就会发现，如果网页一放大，你的图片放大的程度会超过上部导航框的放大的程度，图片区域的div就不会和导航框的div的右部边缘对齐，如下图，然后就是该怎么解决？
追答
这种啊，你可以选择让图片下来，自动换行，或者给body设置一个overflow:hidden这样超出的部分就隐藏了
要是再不行就用JS获取屏幕的宽度，然后动态的计算宽度，然后调整图片的宽度，让它达到正好的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
