divの高さを常に幅の半分にしたいようにCSSで変数を設定できますか？divの画面サイズの幅がパーセントである場合にdivがスケーリングします
<div class="ss"></div>
CSS：
.ss {
width:30%;
height: half of the width;
}
この30％の幅は、画面の解像度に合わせて調整されます
回答:
相対的なパディング（高さ方向でも）は親要素の幅に基づいているため、親アイテムのパディングを使用してこれを行うことができます。
CSS：
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
これはこの記事に基づいています： CSSだけを使用したレスポンシブボックスの比例スケーリング
これを実現するもう1つの優れた方法は、アスペクト比が設定された透明な画像を使用することです。次に、画像の幅を100％に設定し、高さを自動に設定します。残念ながら、それはコンテナの元の内容を押し下げます。したがって、元のコンテンツを別のdivでラップし、親divの一番上に絶対に配置する必要があります。
<div class="parent">
<img class="aspect-ratio" src="images/aspect-ratio.png" />
<div class="content">Content</div>
</div>
CSS
.parent {
position: relative;
}
.aspect-ratio {
width: 100%;
height: auto;
}
.content {
position: absolute;
width: 100%;
top: 0; left: 0;
}
height: 100%;することによってのみ機能しました.content。でもヒントをありがとう。私はこの方法がパディングよりも好きです。
囲んでいるdivのピクセル単位で設定された幅に比例した垂直方向のサイズ設定が必要な場合は、次のような追加の要素が必要だと思います。
#html
<div class="ptest">
<div class="ptest-wrap">
<div class="ptest-inner">
Put content here
</div>
</div>
</div>
#css
.ptest {
width: 200px;
position: relative;
}
.ptest-wrap {
padding-top: 60%;
}
.ptest-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
}
これが機能しない2divソリューションです。60％の垂直パディングは、ウィンドウ幅に比例し、ウィンドウ幅には比例しないことに注意してください。div.ptest。
上記のコードの例を次に示します。これは機能します。
この答えは、私が多くのクラス名を使用したくないことを除いて、他の答えとほとんど同じです。しかし、それは個人的な好みです。ネストされたdivの目的を前もって宣言しているため、各divでクラス名を使用する方が透過的であると主張できます。
<div id="MyDiv" class="proportional">
<div>
<div>
<p>Content</p>
</div>
</div>
</div>
一般的なCSSは次のとおりです。
.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
次に、最初の内側のdivをターゲットにして、幅と高さを設定します（パディングトップ）。
#MyDiv > div { width:200px; padding-top:50%; }
スケーラブルなソリューションを探している人のために：私はSASSで小さなヘルパーユーティリティを作成して、さまざまなブレークポイントに対してレスポンシブな比例長方形を生成しました。SASSプロポーションをご覧ください
それが誰かに役立つことを願っています！
画像を操作するときに役立つ1つの方法ですが、それ以外の場合は回避策として使用できます。
<html>
<head>
</head>
<style>
#someContainer {
width:50%;
position: relative;
}
#par {
width: 100%;
background-color:red;
}
#image {
width: 100%;
visibility: hidden;
}
#myContent {
position:absolute;
}
</style>
<div id="someContainer">
<div id="par">
<div id="myContent">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<img src="yourImage" id="image"/>
</div>
</div>
</html>
使用するには、yourImageを画像のURLに置き換えます。希望する幅/高さの比率の画像を使用します。
div id = "myContent"は、myContentが画像にオーバーレイする回避策の例としてここにあります。
これは次のように機能します。親divは画像の高さに採用され、画像の高さは親の幅に採用されます。ただし、画像は非表示になっています。