最近在写网页的时候，遇到一个问题
图片溢出
当我的图片宽度大小没有设置，过大的时候，它会超出我的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
此时的效果
image.png
然而，此时还有一个问题，因为是onload，所以当浏览器宽度发生变化时
image.png
它还是会超出div
于是想到了监听浏览器窗口变化
网上有很多种使用jquery监听的，其实可以使用window自带属性
window.onresize监听
加入代码如下
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";
}
}
image.png
此时无论怎么响应，图片永远不会溢出
完整代码如下
<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>
网友评论