zoukankan html css js c++ java

Css Div等比例缩放整理（一）

一、CSS Div等比例缩放 1

百分比+fixed；占据屏幕的固定比例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            padding: 0px;
            margin: 0px;
        }

        /*百分比设置div等比例缩放*/
        .propotion {
            width: 50%;
            height: 50%;
            background: red;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="propotion">
        当前div宽度50%，高度50%
    </div>
</body>

</html>

二、Css Div等比例缩放2

使用固定比例的透明图，控制div同比例缩放

案例使用 3:2的透明图片，来扩充比例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*图片自适应设置div等比例缩放*/
        .propotion {
            border: 1.5px solid green;
            width: 50%;
            padding: 10px;
            margin: auto;
        }

        .propotion img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="propotion">
        <img src="http://img.jnqianle.cn/upload/images/202010/08/b333b73c-63ed-4a48-a0f5-dabce1a47560.jpg" alt="">
    </div>
</body>

</html>

多个布局案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row {
            border: 1px solid red;
            padding: 20px;
        }

        .clear {
            clear: both;
        }

        .row .block {
            width: 33.33%;
            border: 0px solid green;

            float: left;
            box-sizing: border-box;
            padding: 20px;
        }

        .row .block .inner {
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        }

        .row .block .img {
            background: red;
        }

        .row .block img {
            width: 100%;
            display: block;/**必须要加的**/
        }

        .row .block .title {
            font-size: 16px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 10px 10px;
        }

        .row .block .summary {
            padding: 0px 10px 10px 10px;
            font-size: 12px;
            color: #888;
        }
    </style>
</head>

<body>
    <!-- 图片控制div等比例缩放案例 -->
    <div class="row">
        <div class="block">
            <div class="inner">
                <div class="img">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>
        <div class="block">
            <div class="inner">
                <div class="img">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>
        <div class="block">
            <div class="inner">
                <div class="img">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
</body>

</html>

View Code

展示效果：

三、CssDiv等比例缩放案例

div等比例缩放+背景图，设置相册展示

cover模式：完全覆盖

contain模式：包含显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row {
            border: 1px solid red;
            padding: 20px;
        }

        .clear {
            clear: both;
        }

        .row .block {
            width: 33.33%;
            border: 0px solid green;

            float: left;
            box-sizing: border-box;
            padding: 20px;
        }

        .row .block .inner {
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        }

        .row .block .img {
            background: red center center/contain no-repeat;
            /* background: red center center/cover no-repeat;  */
        }

        .row .block img {
            width: 100%;
            display: block;
        }

        .row .block .title {
            font-size: 16px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 10px 10px;
        }

        .row .block .summary {
            padding: 0px 10px 10px 10px;
            font-size: 12px;
            color: #888;
        }
    </style>
</head>

<body>
    <!-- 图片控制div等比例缩放案例 +  -->
    <div class="row">
        <div class="block">
            <div class="inner">
                <div class="img"
                    style="background-image: url(http://www.jnqianle.cn/upload/logo/content/202110/23/2af1faa5-76f9-45af-a348-e523e01d8a38.jpg);">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>
        <div class="block">
            <div class="inner">
                <div class="img"
                    style="background-image: url(http://manage.jnqianle.cn/upload/image/20211002/6376876913567486176364537.jpg);">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>
        <div class="block">
            <div class="inner">
                <div class="img"
                    style="background-image:url(http://www.jnqianle.cn/upload/logo/content/202109/24/e2b864e3-5cb7-4785-843a-5e551c59d270.jpg);">
                    <img src="./img/3x2.png" alt="">
                </div>
                <div class="title">
                    图片控制div等比例缩放+图片展示
                </div>
                <div class="summary">
                    Css时间轴布局_Css时间轴布局案例整理
                    Css 左右循环动画_左右循环运动效果案例
                    Css 文字选中设置样式/Css 禁止文字选中
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>


</body>

</html>

View Code

Css时间轴布局_Css时间轴布局案例整理

Css 左右循环动画_左右循环运动效果案例

Css 文字选中设置样式/Css 禁止文字选中

查看全文

相关阅读:
websocket在线测试工具
 短信线上发送错误，线下成功
 nginx添加stream模块1.20
sort 的使用
 实验、进程的同步与互斥——生产者消费者
 实验、可变分区存储管理系统模拟 —— 最先适应分配算法
 test
c++的大数阶乘算法
 C#解析JSON字符串总结
 C++ 查看单个类对象模型利用Vs开发者命令提示工具

原文地址：https://www.cnblogs.com/tianma3798/p/15516181.html