我的另一网站 CODE大全，使用的 bootstrap 搭建的。但是对于博客中引入的图片总是不能随着移动端的适配进行友好的展示。今天查阅了一些相关资料，进行了优化，在这里做个总结！
做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
- width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
- height:auto;图片的高度自己适应(图片有多高就显示多高)
- width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
- max-width:100%;图片的宽度不能超过图片所在的空间的宽度
- max-height:100%;图片的高度不能超过图片所在的空间的高度
- max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
max-width 和 max-height，优先对max-width进行缩放，当图片在max-width缩放后的尺寸仍然超出容器大小时。max-height就发挥了作用：对图片再次进行缩放！举例：
<div style="width:50px;height:40px"> <img src="a.jpg"> <!--这里我们假如图片的实际尺寸是320X320--> </div>
图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是有width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width
所以，当div在不断变化时，图片在div中也会跟着布断发生变化，
这里不介意给图片设置width:100%;height:100%；会造成图片变形。
完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: auto;
height:auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div id="div" style="width: 50px;height: 50px;">
<img src="../5100036_080649087294_2.jpg" />
</div>
<script>
window.onload=function(){
setInterval(function(){move();},1000);
}
function move(){
var _width=document.getElementById('div').style.width.replace('px','');
if(parseInt(_width)>400){
document.getElementById('div').style.width=parseInt(_width)-5+'px';
document.getElementById('div').style.height=parseInt(_width)-5+'px';
}else{
document.getElementById('div').style.width=parseInt(_width)+5+'px';
document.getElementById('div').style.height=parseInt(_width)+5+'px';
}
}
</script>
</body>
</html>
： » HTML/HTML5 设置img(图片)自适应div(容器)
原创文章，作者：Carrie001128，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251213.html