1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      css实现图片自适应容器的示例代码

        发布时间£º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¡¢占位图¡¢等£©按设计稿开发就可以了¡£但经常会遇到接口获取的不规则图片的情况£¬一般这种时候会将小于容器的话将其水平¡¢垂?#26412;?#20013;¡£
      整理一下任务£º

      • 图片宽高都小于容器时垂直¡¢水平居中
      • 图片宽高都大于容器时保持宽高比将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 属性设置的高度比该属性设置的高?#28982;?#22823;,则height 属性会失效.

      这?#20013;?#26524;就舒服多了

      2¡¢背景图的方式

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

      利用css的 background-size: contain; 属性就能进一?#25509;?#21270;图片的宽高都小于容器的情况了¡£

      上代码

        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>

      ?#27604;?#26368;后还得看需求£¬产品是咋要求的¡£

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

      相关文章

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

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

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

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

        以前的解决方法主要是利用js来实现£¬但用过的人都知?#26639;?#21150;法有点繁琐¡£还有一种是在外部容器定义over-flow:hidden¡£但这种办法只会切割图片而不会自动适用¡£
        2009-12-20
      • CSS实现的图片宽高自适应固定边框

        以前的解决方法主要是利用js来实现£¬但用过的人都知?#26639;?#21150;法有点繁琐¡£还有一种是在外部容器定义over-flow:hidden¡£但这种办法只会切割图片而不会自动适用¡£
        2009-12-17

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>