图片溢出div问题的快速解决方法推荐

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含图片溢出,div等相关知识,佚名希望在学习及工作中可以帮助到您

前两天编写了一个前端页面，在本机上显示一切正常。不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破div溢出来。再由于页面是自适应页面，根据不同分辨率的显示器会做出相应的div宽度调整，所以图片即使不大，但是因分辨率不同也会出现溢出的情况。

这里探讨总结一下解决方法。

首先我们先来做个简单的css布局：

<html>
<head>
<meta charset="utf-8" />
<title>div图片溢出的解决方案</title>
<style type="text/css">
#div_home {
width:80%;
margin: 0 auto;
}
#div_left {
width:70%;
height: 800px;
float:left;
padding: 20px;
}
#div_right {
width: 15%;
float: right;
height: 800px;
padding: 20px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="div_home">
<div id="div_left">
<img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小图片"/>
</div>
<div id="div_right"></div>
</div>
</body>
</html>

下面我们再插入尺寸大于div的图片

<img id="img_test" src="http://files.jb51.net/file_images/article/201604/neywzwdjof0.jpg" alt="大图片"/>

来看看效果：

这里的图片过大，溢出了div，这里来探讨一下解决方案：

解决方案一

在css中设置该图片的样式，把最大宽设置为小于它父级div的宽

img {    max-width: 730px;}

但是这样对于不同分辨率的屏幕，也会出现溢出的问题

先来看一下1366*728的分辨率（本机分辨率）下的图片显示情况：

似乎解决了问题，我们把分辨率调为 1024*768，来看看效果：

图片还是溢出来了，对于这种分辨率的屏幕，肯定体验很不友好。

那么，为了解决还是溢出的问题，可以加入另外一种方法：

解决方案二

不显示溢出的部分：

overflow: hidden;

这个代码加在div_left 下面：

相关文章