css 實現圖片寬度自適螢幕，高度與寬度成固定比例

new_abc發表於2019-04-18
CSS
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .zoomImage {
            background: url("head_bg.png") no-repeat;
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="zoomImage"></div>
</body>

效果圖:

原理：這是因為在padding為百分比的時候，是根據他父層的寬度來進行計算的

相關文章