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:271506parcourir
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 :
- L'élément de niveau bloc rouge est centré verticalement au centre de l'écran
- L'élément rouge au niveau du bloc est éloigné des marges gauche et droite de l'écran de 20 pixels chacune
- Le contenu à l'intérieur de l'élément rouge au niveau du bloc est centré horizontalement et verticalement ;
- 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.
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!