web-dev-qa-db-ja.com

max-widthに基づいてCSSでdivを比例的にスケーリングします（imgスケーリングと同様）

CSSのみを使用してdivのようにimgを比例的にスケーリングすることは可能ですか？これが私の最初の試みです： http://dabblet.com/Gist/178336

例

div {
 max-width:100px;
 max-height:50px;
}
img {
 max-width:100px;
 max-height:50px;
}

実結果

Container: 200 x 100
Div:       100 x 50
Image:     100 x 50

Container: 50  x 100
Div:       50  x 50  // I want this to be 50x25, like the image
Image:     50  x 25
imagehtmlcssscale
12
Adam Youngers

パーセントで設定された垂直パディングは要素のwidthから計算されるため、divを常に特定のアスペクト比にすることができます。

padding-top:50%; height:0を設定すると、divの高さは常に幅の半分になります。そして、そのようなコンテナ内にテキストを表示するには、テキストをposition:relativeにして、その中に別のdivを配置し、4辺すべて（最初に設定したパディング）から完全に10px離して配置する必要があります。

コードの私のフォーク を参照してください。

37
Spadar Shut

ある種。変換を使用してスケールアップすることもできますが、それがあなたの考えていることかどうかはわかりません。

-webkit-transform:scale(2);（およびその他のプレフィックス）は、ページレイアウトを変更せずに、サイズを2倍にします。

5
zim2411

試してみてください：

.container img {
    height:50vw;
}

Vwはビューポートに従います。ドキュメントの先頭に設定する必要があります。

<head>
<meta name="viewport" content="width=device-width">
</head>
0
user3849374