4

フルスクリーンの背景画像を持つモバイルページがあります。

縦向きの画像と横向きの画像があります。私の使命は、画面に合わせて縦横比を維持するために側面をトリミングしながら、画像の高さをフルスクリーンに保つことです。

私はこのcssトリックの投稿を試しました:

  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;
  }

縦向きでは(必要に応じて)うまく機能しますが、横向きでは私のニーズを満たしていません。画像を画面全体の幅に保ち、上下からトリミングします(デザイナーからの私の要件は、画面全体の高さを維持し、側面)。画像の比率などを維持するための例はインターネット上にたくさんありますが(たとえば)、状況に応じた解決策を見つけることができました...

ありがとう!ヤニフ

4

1 に答える 1