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;的属性,这样图片大了之后就会溢出隐藏,不会搞乱你的布局了
更多追问追答
追问
追答
这种啊,你可以选择让图片下来,自动换行,或者给body设置一个overflow:hidden这样超出的部分就隐藏了
要是再不行就用JS获取屏幕的宽度,然后动态的计算宽度,然后调整图片的宽度,让它达到正好的效果
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询