本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
我的另一网站 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>
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » HTML/HTML5 设置img(图片)自适应div(容器)