<menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<menu id="2q246"><strong id="2q246"></strong></menu>
<menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>
  • 您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 移動前端 >> 瀏覽設計教程

    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>

    當然最后還得看需求,產品是咋要求的。

    以上就是本文的悉數內容,盼望對大家的學習有所幫助,也盼望大家多多支持圖趣網。

    [教程作者:佚名]
    免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
    本文地址:http://www.iamyunfeng.com/Tutorial/wd493.html
    用CSS畫一個帶陰影的三角形的示例代碼
    關于CSS引入體例的細致見解小結
    圖趣網微信
    建議反饋
    ×
    挺进h孕妇的孕肚视频
    <menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <menu id="2q246"><strong id="2q246"></strong></menu>
    <menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>