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

HTML5 herman 16282浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

我的另一网站 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-widthmax-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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML/HTML5 设置img(图片)自适应div(容器)