背景图片根据宽度自适应高度的方案

最新推荐文章于 2023-11-07 10:42:26 发布

qq_30486009

最新推荐文章于 2023-11-07 10:42:26 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签：图片

本文链接：https://blog.youkuaiyun.com/qq_30486009/article/details/51596210

css3 专栏收录该内容

4 篇文章

订阅专栏

在移动前端开发中，遇到背景图片无法像img标签那样根据屏幕宽度自适应高度的问题。通过使用CSS的内边距（padding）技巧，可以实现背景图片高度随宽度动态调整。这种解决方案利用了垂直方向padding值与宽度的关系，确保了背景图片的适应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动前端自适应开发过程中，使用背景图片替换img标签时，img标签可以根据屏幕宽度自适应高度，而背景图片却无法适应高度，使用css的内边距（padding）可以解决高度问题，因为垂直方向的padding值，根据宽度的大小来计算的，办法如下；

<style>
    .wrap{
        width: 100%;
    }
    .banner{
        width: 100%;
        max-width: 490px;  /**图片的宽度不大于图片实际像素**/
        height: 0;
        max-height: 329px;
        padding-bottom: 67.14%; /**根据图片高宽比计算*/
        margin: 0 auto;
        background: url("images/test.jpg") no-repeat center;
        background-size: cover;
    }
    @media only screen and (min-width: 490px) {
        /**屏幕大于490时，将背景框高度设置为图片高度的实际像素**/
        .banner{
            height: 329px;
            padding-bottom: 0;
        }
    }
</style>
<div class="wrap">
    <!--role属性  aria-label属性增强html的可读性，更语义化-->
    <div role="img" aria-label="banner img"  class="banner"></div>
</div>