ホームページ > 記事 > ウェブフロントエンド > 背景幅100%のときにcss3の高さを背景画像に比例して伸ばす方法_html/css_WEB-ITnose
背景幅100%のときにcss3の高さを背景画像に比例して伸ばす方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:091469ブラウズ
*{ マージン:0; パディング:0;} .kech{ 背景画像: url(tu.jpg) ;背景サイズ: 100% 自動; 背景繰り返し: 繰り返しなし; .kech :before{コンテンツ: ""; 表示: パディングトップ: 100%;} .kech1 img{ width:100%;}
前に、padding-top:100%; を使用して見つけましたが、それは間違っています。 kech の効果を kech1 と同じにしたいだけです。幅を 100% に設定すると、画像の幅を 100% に設定し、高さを同じ効果に設定するのと同じように、背景が同じ比率で引き伸ばされます。
ディスカッションへの返信 (解決策)
background-size:100% auto;
以上、幅 100%、高さの比率が等しくなります
div の高さは 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％のパーセンテージを取得し、この問題を完全に解決しました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。