<img>をCSSまたはJavascriptの背景にするにはどうすればよいですか？

Question

私はちょうどbackground-size: cover;を使用してフルサイズの背景画像を取得するクライアント用のウェブサイトを立ち上げましたが、モバイルSafariでは動作しません。

imgタグを使用して画像を表示し、JSを使用してビューポートのアスペクト比を求め、アスペクト比に応じて全幅/高さを設定しました。

ここで、この画像をビューポートにどのように配置するのかと思います。 JSまたはCSSのいずれか。

コード：

div.si { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
}

<div class="si" style="background: url('bg.jpg') no-repeat fixed center; background-size: cover; position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;"> 
 

 
    <img src="bg.jpg" style="width: auto; height: auto; min-height: 100%; min-width: 100%;" /> 
 

 
</div>

今のインラインCSSを気にしない;）

基本的にimgは、ビューポートの外にオーバーフローするので、私は、私はそれを固定する方法を疑問に思います左上（top: 0, right: 0, bottom: 0, left: 0;）ではなく、中央です。画像がビューポートより大きいので、これは難しいと思うので、それはmargin: auto;またはtext-align: center;より難しいようです。

JSを動作させるにはJSが必要なのでしょうか？事前に

感謝:)

Answer 1

こんにちはあなたは使用することができるかもしれ「オブジェクトフィット：カバー;」あなたのお役に立つかもしれないCSSのプロパティ

ご使用の前にブラウザのsuportを確認する必要があります。ここ

Browser support

はLink reference

であり、それはCSS

Answer 2

bを扱うことができるように、jqueryのメソッドを使用するよりも、メディアクエリを使用することをお勧めします私が正しくそれを得たなら、あなたは、crによって異なるビューポートで背景画像を反応させようとしていますあなたのdiv.si内の別のimgを食べる？

div.siにこれを使用してください。

div.si { 
 
    background-size: 100% 100%; 
 
}

それが応答させるために、しかし、あなたのいずれかが小さく、ビューポートの背景-sizeプロパティを更新する必要があります。あなたは、その背景の一部を犠牲にするか、小さな画面で盛りつぶす必要があります。

Answer 3

あなたの画像、CSSでこれを追加しようとすることができます

left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 

変換ライン上のプレフィックスを忘れないでください。