• 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 三地跨度走势图带连线:css实现图片自适应容器的示例代码

    山西体彩11选5直选遗漏 www.caxru.com   发布时间:2019-02-27 15:39:33   作者:飘啊飘   我要评论

    这篇文章主要介绍了css实现图片自适应容器的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    经常有这样一个场景,需要让图片自适应容器的大小。

    1、img标签的方式

    我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。

    <div class='div1'>
        <img src="./peiqi.png" alt="">
    </div>
    .div1 {
        width:500px;
        height:400px;
        border:1px solid black;
    }
    .div1 img  {
        /*
        width: 100%;
        height:100%;
        */
    }

    这是正常的佩琪(如果图片比容器大的话,图片会超出容器)

    .div1 {
        width:500px;
        height:400px;
        border:1px solid black;
    }
    .div1 img  {
        width: 100%;
        height:100%;
    }

    这是100%的佩琪

    额,好像刚过完年。

    虽然符合了自适应的要求,但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。如果说是单个图片(logo、占位图、等)按设计稿开发就可以了。但经?;嵊龅浇涌诨袢〉牟还嬖蛲计那榭?,一般这种时候会将小于容器的话将其水平、垂直居中。
    整理一下任务:

    • 图片宽高都小于容器时垂直、水平居中
    • 图片宽高都大于容器时保持宽高比将width或height充满容器
       <div class='div1'>
            <img src="./peiqi.png" alt="">
        </div>
        <div class='div1'>
            <img src="./peiqi2.png" alt="">
        </div>
        <div class='div1'>
            <img src="./peiqi4.jpeg" alt="">
        </div>
    
      .div1 {
            width:500px;
            height:400px;
            border:1px solid black;
            display: table-cell;
            vertical-align: middle;
        }
        .div1 img  {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
        }
    max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
    max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.

    这种效果就舒服多了

    2、背景图的方式

      .div {
            background-size: contain;
        }
    background-size: contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    利用css的 background-size: contain; 属性就能进一步优化图片的宽高都小于容器的情况了。

    上代码

      div {
            height: 400px;
            width: 500px;
            border: 1px solid black;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .div1 {
            background-image: url(./peiqi1.png);
        }
        .div2 {
            background-image: url(./peiqi2.png);
        }
        .div3 {
            background-image: url(./peiqi4.jpeg);
        }
      <div class='div1'></div>
        <div class='div2'></div>
        <div class='div3'></div>

    当然最后还得看需求,产品是咋要求的。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    • CSS实现网页背景图片自适应全屏的方法

      这篇文章主要介绍了CSS实现网页背景图片自适应全屏的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-02-07
    • html图片自适应手机屏幕大小的css写法

      在html里面插入图片,让其自适应屏幕大小,可以通过css来完成,下面有个示例,希望对大家有所帮助
      2014-08-22
    • css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码

      由于用户上传的图片太大自己又不去调解,导致展示的时候图片太大撑开了,直接影响了界面的美观度,于是想使用css属性尝试控制下:给图片设置显示最大的宽度,还好Firefox/Ope
      2013-02-06
    • CSS 实现的图片宽高自适应固定边框

      以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐?;褂幸恢质窃谕獠咳萜鞫ㄒ錹ver-flow:hidden。但这种办法只会切割图片而不会自动适用。
      2009-12-20
    • CSS实现的图片宽高自适应固定边框

      以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐?;褂幸恢质窃谕獠咳萜鞫ㄒ錹ver-flow:hidden。但这种办法只会切割图片而不会自动适用。
      2009-12-17

    最新评论

  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 3d试机号几集几球今天 彩票p3试机号 重庆幸运农场中奖秘籍 澳门五分彩新骗局聊天 快乐8飞盘 黑金团队快乐8下载 福彩3d历史开奖号码 大赢家足球即时比分 3d 试机号 福彩3d出号走势图彩宝 排列5开奖 新时时彩合买 世界杯足彩哪里买 浙江体彩6+1走路图 丝丝刮刮乐 山东快乐扑克3最大遗漏