css-宽高比固定自适应-浮动+absolute+padding-top

2年前 (2022) 程序员胖胖胖虎阿

226 0 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度自适应</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            background-color: pink;
            position: relative;
        }
        .main:after{display:block;content: "";visibility: hidden;clear: both;}
        .main div{
            float: left;
            width: calc((100vw - 24px)/3);
            position: relative;
            padding-top: 35%;
            margin-right: 8px;
            border:1px black solid;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .main div:nth-child(1){
            background: url(images/1.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(2){
            background: url(images/2.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(3){
            background: url(images/3.jpg) no-repeat;
            background-size: cover;
        }
        .p1{
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: red;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="main">
        <div><p class="p1">图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比，使其百分比与宽度的百分比为需要的比例。这里需要注意的是：padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

版权声明：程序员胖胖胖虎阿发表于 2022年10月29日下午5:48。
转载请注明：css-宽高比固定自适应-浮动+absolute+padding-top | 胖虎的工具箱-编程导航