Android view 等比缩放 div等比例缩放

转载

冷月星 2023-11-16 20:19:35

文章标签 Android view 等比缩放缩放时间轴 html 文章分类 Android 移动开发

一、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>

Android view 等比缩放 div等比例缩放_缩放

二、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>

Android view 等比缩放 div等比例缩放_时间轴_02

多个布局案例：

Android view 等比缩放 div等比例缩放_缩放_03

Android view 等比缩放 div等比例缩放_Android view 等比缩放_04

<!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

展示效果：

Android view 等比缩放 div等比例缩放_html_05

Android view 等比缩放 div等比例缩放_缩放_06

三、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

Android view 等比缩放 div等比例缩放_时间轴_07