recherche

Maison  >  Article  >  interface Web  >  Code CSS pour implémenter une disposition proportionnelle largeur-hauteur

Code CSS pour implémenter une disposition proportionnelle largeur-hauteur

小云云
小云云original
2018-03-14 09:38:271498parcourir

La largeur est deux fois la hauteur (mise à l'échelle proportionnelle)Idée d'implémentation : basée sur l'élément parent, largeur enfant : 100 % (c'est-à-dire 100 % de la largeur parent), padding- top : 50% (soit 50% de la largeur parent. Selon la spécification CSS, si le remplissage est exprimé en pourcentage, padding : 100% est égal à la largeur de l'élément parent

Pourquoi pas simplement `largeur : 50% ; hauteur : 50% ;?

Ensuite, la hauteur devient 50% de la hauteur du parent (sauf si la largeur et la hauteur du parent sont égales) ;

Titre original :

  1. L'élément de niveau bloc rouge est centré verticalement au centre de l'écran

  2. L'élément rouge au niveau du bloc est éloigné des marges gauche et droite de l'écran de 20 pixels chacune

  3. Le contenu à l'intérieur de l'élément rouge au niveau du bloc est centré horizontalement et verticalement ;

  4. La hauteur de l'élément de niveau bloc rouge est toujours la même que celle de l'élément de niveau bloc rouge 50 % de la largeur.

Le rapport largeur/hauteur de la partie rouge est de 2:1

Code source :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高比例固定</title>
    <style>

        .father{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #0c8ac5;
        }

        .son{
            width: 100%;
            padding-top: 50%;
            background-color: #c03035;

        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #D8D8D8;
        }

        img{
            float: left;
            margin-right: 10px;
            border: 2px solid #fdf6e3;
        }

    </style>
</head>
<body>
    <section class="father">
        <p class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子（现已离开武当），八奇技之一风后奇门的继承人，靠占卜悟出天道，却又作出甘于投身乱世的选择。外表一副老好人的温良相，谦谦有礼如温吞水般，做事也经常是一副没精打采，貌似没睡醒的样子。优哉游哉还脾气软，代表举动经常是歉意笑着作出让步。似乎对什么都无所谓，一副悠然道人之姿，但是在涉及到家人安危时毫不含糊，甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人，实力在后生一辈中甚至称得上头筹，暂时只有一次完全没预料到地阴沟里翻船。</span></p>
    </section>
</body>
</html>
Recommandations associées :

PHP met à l'échelle les classes d'images proportionnellement à la largeur et à la hauteur maximales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Modèle de boîte HTML et CSSArticle suivant：Modèle de boîte HTML et CSS

Articles Liés

Voir plus