图片溢出div，超出div解决办法
程序员文章站
2022-05-01 20:17:49
...
当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比会随浏览器可视界面而缩小，但是此时图片因为固定宽度不能同步缩小，还是会发生溢出现象。还有一种将就的办法，就是设置overflow:hidden,隐藏溢出的部分，但是大家都可以预料的到那种糟糕的效果
我的解决办法
方法一
给图片设置width:100%
方法二
可以使用一段js来解决
window.onload = function(){
//获取图片元素
var imgs = document.getElementsByTagName("img");
//获取div元素
var contentLeft = document.getElementById("col-md-7");
//使用js设置图片元素宽度的变化
for(var i=0; i<imgs.length; i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
}
}
//40是要减去padding方法三
使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。
使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。
<script type="text/javascript" >
方法四
此时无论怎么响应，图片永远不会溢出
完整代码如下
<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >
//缩放图片到合适大小
function ResizeImages()
{
var myimg,oldwidth,oldheight;
var maxwidth=550;
var maxheight=880
var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定义的id不是article，请修改此处
for(i=0;i<imgs.length;i++){
myimg = imgs[i];
if(myimg.width > myimg.height)
{
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth/oldwidth);
myimg.width = maxwidth;
}
}else{
if(myimg.height > maxheight)
{
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight/oldheight);
myimg.height = maxheight;
}
}
}
}
//缩放图片到合适大小
ResizeImages();
</script>此时无论怎么响应，图片永远不会溢出
完整代码如下
<html>
<head>
<meta charset="utf-8" />
<title>div图片溢出</title>
<style type="text/css">
#container {
width:80%;
margin: 0 auto;
}
#col-md-7 {
width:70%;
height: 800px;
float:left;
border:1px solid red;
padding: 20px;
}
#col-md-5 {
width: 15%;
float: right;
height: 800px;
border:1px solid blue;
padding: 20px;
}
img {
max-width: 730px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName("img");
var contentLeft = document.getElementById("col-md-7");
for(var i=0; i<imgs.length; i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
}
}
window.onresize = function(){
var imgs = document.getElementsByTagName("img");
var contentLeft = document.getElementById("col-md-7");
for(var i=0; i<imgs.length; i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
}
}
</script>
</head>
<body>
<div id="container">
<div id="col-md-7">
</div>
<div id="col-md-5"></div>
</div>
</body>
</html>转载：
https://www.jianshu.com/p/42e78786d09b
此时无论怎么响应，图片永远不会溢出
完整代码如下
推荐阅读