• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JAVA web前端中文站 3年前 (2017-05-21) 2479次浏览 已收录 0个评论

今天主要学习 HTML 中博客中设置img自适应 div,引入的图片总是不能随着移动端的适配进行友好的展示。今天查阅了一些相关资料,进行了优化,在这里做个总结!

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

做法很简单,只要设置对应图片的 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">//www.lisa33xiaoq.net   
 <!--这里我们假如图片的实际尺寸是 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>

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML/HTML5 设置 img(图片)自适应 div(容器)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址