1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 技术杂谈

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

• 技术杂谈 • 阅读 131

一、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>Documenttitle>
    <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等比例缩放整理（一）

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

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

多个布局案例：

Css Div等比例缩放整理（一）Css Div等比例缩放整理（一） 
<!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>Documenttitle>    <style>        .row {            border: 1px solid red;            padding: 20px;        }


    .clear </span><span>{</span><span>
        clear</span><span>:</span><span> both</span><span>;</span>
    <span>}</span><span>

    .row .block </span><span>{</span><span>
        width</span><span>:</span><span> 33.33%</span><span>;</span><span>
        border</span><span>:</span><span> 0px solid green</span><span>;</span><span>

        float</span><span>:</span><span> left</span><span>;</span><span>
        box-sizing</span><span>:</span><span> border-box</span><span>;</span><span>
        padding</span><span>:</span><span> 20px</span><span>;</span>
    <span>}</span><span>

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

    .row .block .img </span><span>{</span><span>
        background</span><span>:</span><span> red</span><span>;</span>
    <span>}</span><span>

    .row .block img </span><span>{</span><span>
        width</span><span>:</span><span> 100%</span><span>;</span><span>
        display</span><span>:</span><span> block</span><span>;</span><span>/*</span><span>*&#x5FC5;&#x987B;&#x8981;&#x52A0;&#x7684;*</span><span>*/</span>
    <span>}</span><span>

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

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



head>


<body>


<span>&lt;</span><span>div </span><span>class</span><span>=&quot;row&quot;</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>

    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;clear&quot;</span><span>&gt;<span>div</span><span>&gt;</span>
<span><span>div</span><span>&gt;</span>



body>


html>View Code


展示效果：


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

三、CssDiv等比例缩放案例


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


cover模式：完全覆盖


contain模式：包含显示


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

<!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>Documenttitle>    <style>        .row {            border: 1px solid red;            padding: 20px;        }


    .clear </span><span>{</span><span>
        clear</span><span>:</span><span> both</span><span>;</span>
    <span>}</span><span>

    .row .block </span><span>{</span><span>
        width</span><span>:</span><span> 33.33%</span><span>;</span><span>
        border</span><span>:</span><span> 0px solid green</span><span>;</span><span>

        float</span><span>:</span><span> left</span><span>;</span><span>
        box-sizing</span><span>:</span><span> border-box</span><span>;</span><span>
        padding</span><span>:</span><span> 20px</span><span>;</span>
    <span>}</span><span>

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

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

    .row .block img </span><span>{</span><span>
        width</span><span>:</span><span> 100%</span><span>;</span><span>
        display</span><span>:</span><span> block</span><span>;</span>
    <span>}</span><span>

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

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



head>


<body>


<span>&lt;</span><span>div </span><span>class</span><span>=&quot;row&quot;</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>
                style</span><span>=&quot;background-image: url(http://www.jnqianle.cn/upload/logo/content/202110/23/2af1faa5-76f9-45af-a348-e523e01d8a38.jpg);&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>
                style</span><span>=&quot;background-image: url(http://manage.jnqianle.cn/upload/image/20211002/6376876913567486176364537.jpg);&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;block&quot;</span><span>&gt;</span>
        <span>&lt;</span><span>div </span><span>class</span><span>=&quot;inner&quot;</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;img&quot;</span><span>
                style</span><span>=&quot;background-image:url(http://www.jnqianle.cn/upload/logo/content/202109/24/e2b864e3-5cb7-4785-843a-5e551c59d270.jpg);&quot;</span><span>&gt;</span>
                <span>&lt;</span><span>img </span><span>src</span><span>=&quot;./img/3x2.png&quot;</span><span> alt</span><span>=&quot;&quot;</span><span>&gt;</span>
            <span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;title&quot;</span><span>&gt;</span><span>
                &#x56FE;&#x7247;&#x63A7;&#x5236;div&#x7B49;&#x6BD4;&#x4F8B;&#x7F29;&#x653E;+&#x56FE;&#x7247;&#x5C55;&#x793A;
            </span><span><span>div</span><span>&gt;</span>
            <span>&lt;</span><span>div </span><span>class</span><span>=&quot;summary&quot;</span><span>&gt;</span><span>
                Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;_Css&#x65F6;&#x95F4;&#x8F74;&#x5E03;&#x5C40;&#x6848;&#x4F8B;&#x6574;&#x7406;
                Css &#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x52A8;&#x753B;_&#x5DE6;&#x53F3;&#x5FAA;&#x73AF;&#x8FD0;&#x52A8;&#x6548;&#x679C;&#x6848;&#x4F8B;
                Css &#x6587;&#x5B57;&#x9009;&#x4E2D;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;/Css &#x7981;&#x6B62;&#x6587;&#x5B57;&#x9009;&#x4E2D;
            </span><span><span>div</span><span>&gt;</span>
        <span><span>div</span><span>&gt;</span>
    <span><span>div</span><span>&gt;</span>
    <span>&lt;</span><span>div </span><span>class</span><span>=&quot;clear&quot;</span><span>&gt;<span>div</span><span>&gt;</span>
<span><span>div</span><span>&gt;</span>



body>


html>View Code


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

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

更多：


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


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


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




Original: https://www.cnblogs.com/tianma3798/p/15516181.html
Author: 天马3798
Title: Css Div等比例缩放整理（一）

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/553655/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球