web-dev-qa-db-ja.com

cssのみの幅の比率として高さを設定します

CSSのみを使用して、HTMLの<img>要素に対して次のことを実現したいと思います。

width: calc(100% - 20px)
height: calc(width * 0.5625) /*16:9 aspect ratio*/

<div>要素とその背景に関して、インターネット全体に同様の例があります。ただし、<img>要素の場合、パディングの変更は機能しません

Similairの例：CSSでdivのアスペクト比を維持する

Edit、jQueryを使用すると、次の方法で上記を実現できます。

$(".myImage/s").outerHeight($(".myImage/s").outerWidth() * 0.5625);
htmlcssimagesize
6
Alexander

高さプロパティで幅を定義するには、viewport-width（vw）を使用します。

width: calc(100% - 20px)
height: calc((100vw - 20px) * 0.5625) /*16:9 aspect ratio*/

viewportは、Webページの表示領域です。

フルサイズは100vw * 100vhです。ここで、vwとwhはビューポートのサイズ単位です。

したがって、1つの "vw"は、Webページの現在表示されている幅の1%に等しくなります。

詳細については、次を参照してください： ビューポート単位：vw、vh、vmin、vmax

6
HelpingHand

これを行うには、vw（ビューポート幅）を使用できます。

width: calc(100vw - 20px);
height: calc((100vw - 20px) * 0.5625); /*16:9 aspect ratio*/

画像をdivの背景として配置する場合は、padding-bottomメソッドを使用することもできます。

https://jsfiddle.net/m11L9kjb/1/

1
hector22x

これは実際の比率を使用して私のために働きました…そして私は最大寸法が必要だったので、高さを設定する前にそれらを設定することを確認してください：

position: relative;
margin: 0 auto;
width: 100vw;
max-width: 1080px;
max-height: 1920px;
height: calc(100vw * (16/9));
1
Joe Berry