网站百科

为您解码网站建设的点点滴滴

首页 > > 网站建设知识 > 建站知识 > 前端设计

企业建站知识推广知识小程序微信营销 APP开发前端设计 MindManager 开发语言自媒体

HTML/HTML5 设置img(图片)自适应div(容器)

发表日期：2019-09 文章编辑：小灯浏览次数：29687

我的另一网站 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>

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/21071.html

上一篇：<微信小程序 wx:if wx:elif wx:else 多条件判断下一篇：免费的 Web 视频播放器 Projekktor>