「画像の高さは幅の50％」という要件にも遭遇した可能性があります。
この要件は単純に見えますが、実際には非常に面倒です。
要素の
幅と高さのパーセンテージは親要素の幅と高さに対して計算されるため、幅と高さを直接設定することは期待に応えません。
.div {
width: 100%;
height: 50%;
}
また、空のディスプレイの高さのデフォルト値：ブロック要素は0pxです。親要素が高さを設定しない場合、要素の高さは0pxです。
それが比較的浅い要素である場合、実際にcss3の新しい単位vw、vhを使用して達成できます
.img {
width: 100vw;
height: 50vw;
}
.img {
width: 100vh;
height: 50vh;
}
しかし、それが比較的深い要素である場合、比率は
vwを計算するのが難しく、vhもこの要求を達成するのが困難です。
現時点では、親要素の幅に対するパディングの割合が計算されるため、パディングを使用できます。これにより、垂直方向と水平方向を統一できます。
.div {
width: 100%;
padding-bottom: 50%;
height: 0;
}
現在、
位置：相対、位置：絶対、固定の水平および垂直比率の画像に拡張できる、固定の水平および垂直比率の要素をすでに実現できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css 控制图片的横竖比例</title>
<style>
* {
outline: 1px #f00 solid;
}
.ratioImg {
width: 50%;
height: auto;
/* 高度自动; 宽度自定义 */
}
.ratioImg__box {
width: 100%;
padding-bottom: 50%;
position: relative;
height: 0;
}
.ratioImg__box__img {
position: absolute;
top: 0;
left: 0;
/* bottom: 0; */
/* right: 0; */
/* margin: auto; */
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="ratioImg">
<div class="ratioImg__box">
<img class="ratioImg__box__img" src="https://profile.csdnimg.cn/F/A/9/3_u013970232" />
</div>
</div>
</body>
</html>
//終わり