1

ページの中央に、ブラウザウィンドウの画像を設定しましたmax-height:100%;（下部に小さなパディングがあります）。現在、ブラウザのサイズを変更したときに画像の縦横比が崩れないようにするのに問題があります (興味深いことに、サイズ変更後に更新すると正しい縦横比で表示されます)。

codepen で例を設定しました。比率を正しく保つ方法についてアドバイスをいただければ幸いです。

http://cdpn.io/sHJhl

UPDATE 18/08: 上記のコペペンのコードを更新しました。ブラウザのサイズを変更すると画像が歪む Chrome を除くすべてのブラウザで動作するようになりました。奇妙なことに、codepen が編集モードの場合、Chrome で問題なくサイズ変更されます。私の開発サイトで codepen のコードをテストしたところ、同じ問題が発生したため、codepen の癖ではありません。誰かがこれを手伝ってくれることを願っています。

さらに更新 18/08: Chrome でこの問題を解決するmax-width:100%には、以下の回答を参照してください。

4

3 に答える 3

4

この問題を解決しました。Chromeで動作するmax-width:100%;だけでなく、必要な画像。max-height:100%; width:auto;コードペンを更新して、完全に機能するコードを表示しました: http://cdpn.io/sHJhl

于 2013-08-18T18:40:54.007 に答える
0

ページ全体の背景を実現したいですか？

これは私のために働いた：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

ソース: http://css-tricks.com/perfect-full-page-background-image/

于 2013-08-15T13:11:51.997 に答える