css 实现图片宽度自适屏幕，高度与宽度成固定比例

最新推荐文章于 2024-06-13 19:04:45 发布

new_abc

最新推荐文章于 2024-06-13 19:04:45 发布

阅读量4.2k

点赞数 2

分类专栏： html css

本文链接：https://blog.csdn.net/new_abc/article/details/89378031

版权

html css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

    <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为百分比的时候，是根据他父层的宽度来进行计算的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

new_abc

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 实现图片宽度自适屏幕，高度与宽度成固定比例

<style> * { padding: 0; margin: 0; } .zoomImage { background: url("head_bg.png") no-repeat; width: 100%; ...
复制链接

扫一扫