CSS:让图片保持长宽比自适应缩小放大解决方案

最新推荐文章于 2024-04-10 17:21:13 发布

'"<>{{7*7}}

最新推荐文章于 2024-04-10 17:21:13 发布

阅读量4.5k

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_43415644/article/details/104186049

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原理：width height 的百分比表示方式都是以父元素的宽度长度为参照的（前提：父元素必须设置宽度和长度）

而padding的百分比表示方式是以 width的值为参照的。

例如：width设置为100px padding设置为10% 则10%表示padding =width * 10% 即10px；

所以，我们可以不设置div容器的高度，只设置宽度，然后用padding-top来撑起高度。只要宽度和padding-top保持一定的比例即可。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .aspectration {
    height:auto; 
    width: 100%; 
    background:url(1.png);
    background-size:100% 100%;
    }

    .aspectration[data-ratio="16:9"] {
        padding-top: calc(100% * 9 / 16);
    }

    .main{
        width:20%;
    }
    </style>
</head>

<body>
    <div class="main">
            <div class="aspectration" data-ratio="16:9"></div>
            <div><input type="checkbox">站点信息</div>
    </div>
</body>
</html>