JS控制图片宽度，当高度太高，宽度居然自己变？
这是Jquery:<scriptsrc="jquery-3.3.1.js"></script><script>$(document).ready(function(){$...
这是Jquery: <script src="jquery-3.3.1.js"></script> <script> $(document).ready(function () { $("img").css("width", screen.availWidth + "px"); }); $(document).ready(function () { $("img").css("height", "700px");//这行是关键,运行为图一。当这行都注释，结果是//图二 }); </script> <style> * { margin: 0; padding: 0; border: 0; } </style><body> <img src='任意一张图片，宽度很大，高度很大'></body>
这两个图片是Google浏览器的调试。body和img宽度一模一样都是availWidth。但是问题的图二明显有滚动条，超出了可用宽度。
注意：高度没超过availHeight，宽度就不会超过availWidth。 展开
这两个图片是Google浏览器的调试。body和img宽度一模一样都是availWidth。但是问题的图二明显有滚动条，超出了可用宽度。
注意：高度没超过availHeight，宽度就不会超过availWidth。 展开
2个回答
展开全部
这是img标签的特性决定的，如果width和height属性只设置其中一个，另一个会自动等比例缩放，也就是说图片会自动保持其原始的宽高比，只有width和height同时设置，图片才会产生压扁或拉高的变形效果。
追问
我图片的宽度都是screen.availWidth。但是图二的宽度似乎超出了屏幕。
追答
首先，当高度超出availHeight，就会自动出现纵向的滚动条，这个不用解释吧？
然后，纵向的滚动条肯定要占用位置，这样它就会自动覆盖掉图片最右边的一小部分，这个也能理解吧？
既然图片被覆盖掉了，那么横向滚动条也就跟着出来了啊，不对吗？
也就是说，图片的宽度实际上没有改变，仍然是availWidth，被骗的只是你的眼睛而已！
把body的滚动条取消掉你就会明白了：
body {overflow:hidden}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
