CSS==让div的高等于背景的高（页面自适应，div的宽不变）

最新推荐文章于 2023-07-12 15:39:56 发布

原创最新推荐文章于 2023-07-12 15:39:56 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS自适应

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS的padding属性来创建固定比例背景图片的技术，通过将div的高度设置为0并使用padding-bottom属性来保持宽高比，从而实现响应式布局。

<style>
    .container{
        background-image: url('test.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        /* 宽高比*/
    }
</style>
<div class="container">
        <p>这里是内容...</p>
</div>

原理：div内容高度设为0，由padding撑起来