zoukankan      html  css  js  c++  java
  • 图片自适应容器大小

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img auto</title>
        <style>
            body {
                position: relative;
            }
            .parent {
                position: absolute;
                width: 100%;
                height: 100%;
                top:0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .item {
                float: left;
                width: 20%;
                margin: 10px 2.5%;
                height: 0;
                padding-bottom: 12.5%;
                background-color: #dbe0e4;
                background: url(gril.jpg) no-repeat;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
    </html>

    利用padding撑开盒子大小,padding-bottom撑开子元素的高度,子元素宽度与高度成比例,这样就可以自适应了

  • 相关阅读:
    css随笔7
    css随笔6
    css随笔5
    *css随笔4
    css3随笔3
    css随笔2
    css随笔1
    HTML总结
    HTML随笔2
    消息转发原理
  • 原文地址:https://www.cnblogs.com/harlem/p/10074087.html
Copyright © 2011-2022 走看看