背景幅100%のときにcss3の高さを背景画像に比例して伸ばす方法_html/css_WEB-ITnose

*{ マージン:0; パディング:0;} .kech{ 背景画像: url(tu.jpg) ;背景サイズ: 100% 自動; 背景繰り返し: 繰り返しなし; .kech :before{コンテンツ: ""; 表示: パディングトップ: 100%;} .kech1 img{ width:100%;}

;div class="kech1">

前に、padding-top:100%; を使用して見つけましたが、それは間違っています。 kech の効果を kech1 と同じにしたいだけです。幅を 100% に設定すると、画像の幅を 100% に設定し、高さを同じ効果に設定するのと同じように、背景が同じ比率で引き伸ばされます。

ディスカッションへの返信 (解決策)

background-size:100% auto;

以上、幅 100%、高さの比率が等しくなります

背景サイズの設定画像です。 。 。

div の高さは js で解決する必要があります。 。 。

background-size:100% auto; これは試してみましたが、div の高さは js で解決する必要があります。この JS の書き方

これはわかっていますが、高さと幅の比率が固定されたコンテナーを作成する必要があります

ここでちょっとしたトリックがあります。つまり、padding-bottom は親の幅の比率に基づいて計算されます。要素なので、ここでオーバーフローpadding-bottomを使用できます
width:100%;
height::0;
padding-bottom:100%//ここで比率を設定してから、背景画像を追加できます
この記事を参照してください http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

http://zihua.li/2013/12/keep-height-関連する-to-width- using-css/

この記事は、画像の高さを幅で割って46％のパーセンテージを取得し、この問題を完全に解決しました