我該如何居中 <img> 作為CSS或Javascript的背景？

Question

我剛剛為一個使用background-size: cover;的客戶推出了一個網站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;更難margin: auto; 或text-align: center; 。

我是否可能需要JS來使其工作？

提前致謝 ：）

Answer 1

嗨，可能你可以使用“對象適合：封面;” css中可能對你有幫助的財產

你們必須在使用前檢查瀏覽器支持。

瀏覽器支持

這是鏈接參考

並且使用媒體查詢比使用jquery方法更好，因為它可以在css中處理

Answer 2

如果我說得對，你試圖通過在div.si中創建另一個img來使背景圖像在不同的視口中響應？

嘗試將此用於div.si.

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

但要使其響應，您需要更新較小視口上的background-size屬性。 您要么犧牲背景的一部分，要么將其擠壓在較小的屏幕中。

Answer 3

您可以嘗試在圖片css中添加：

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

不要忘記變換線上的前綴。