携帯電話の背景画像

私は、アスペクト比を維持しながら、応答性の高いストレッチ/クロップを行うためにサイトの背景画像を取得しようとしていました。私は以下を使って成功しました。これは、ブラウザの変更のアスペクト比に合わせて画像調整を完璧に動作デスクトップブラウザ上で閲覧携帯電話の背景画像

body { 
 
\t background-image: url('image.png'); 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
}

。しかし、モバイル（Chrome）でテストした場合、背景画像は「カバー」値を無視して元のサイズ（大量）に戻り、縦横両方向で画面の側面をまっすぐにカットします。

携帯電話のバージョンをブラウザウィンドウと比較して維持し、デスクトップ用の同じ動作を実現するにはどうすればよいですか？理想的にはCSS修正だけをお願いします。

ありがとうございました。

出典

2016-08-28 Tom Jardine-Smith

私は小さな画面に@mediaを使用していると思います。あなたの問題は私の意見で固定されています。 – kolboc

background-size: 100% 100%（幅の高さ）が動作するはずです。

出典

2016-08-28 22:58:19 StevenC

私はそれを試みましたが、イメージのアスペクト比がつぶれてひどく見えます。：S –

[www.scottychamsmusic.com]（http://www.scottychamsmusic.com/）これはあなたが探している線に沿っていますか？ – StevenC

いいえ。アスペクト比が画像上で強制的に変化するので、伸びてゆがんでしまいます。私はこれを探しています：（デスクトップのWebブラウザからの背景画像を見てください - クロムは最高です - http://www.beckyspetservices.co.uk/）。これは、フォームのデスクトップで見たときに機能しますが、モバイルで見ると、画像は適切に拡大されず、大きすぎるままです。 –

答えて

関連する問題