浏览器端：图片自适应，宽高相等或成比例

最新推荐文章于 2024-10-02 15:35:50 发布

Sheyami

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量254

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Sheyami/article/details/130506431

版权

该代码示例展示了如何使用CSS创建一个基于宽度的等比例高度布局，利用padding-top实现100%高度比，背景色为#F7F8FA，并将图片绝对定位以适应容器，同时应用了边框圆角处理。

摘要由CSDN通过智能技术生成

    .top-img {
        width: 100%;
        height: 0;
        padding-top: 100%;
        background: #F7F8FA;
        opacity: 1;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 2px 2px 2px 2px;
        }
    }