如何將<img>作爲背景使用CSS或Javascript？

我剛剛爲使用background-size: cover;獲取全尺寸背景圖片的客戶端啓動了一個網站，並且它在移動版Safari中無法使用。如何將<img>作爲背景使用CSS或Javascript？

所以我使用了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來使它工作？

感謝提前:)

來源

2016-06-30 Benjamin Ulstein

也許'max-width：100vw;最大高度：100vh;'？ – haim770

'max-width：100％; max-height：100％' –

@BenjaminUlstein你可以在這裏提供代碼嗎？ –

喜可能是你可以使用「目標契合：覆蓋;」財產在CSS可能會幫助你

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

Browser support

這裏是Link reference

而且最好使用媒體查詢比使用的jQuery方法，因爲它可以b中的CSS處理

來源

2016-06-30 08:39:52

但當然，IE不支持它。 http://caniuse.com/#search=object-fit –

@SamiaRuponti hii只要jQuery模塊檢測到「移動Safari」（如提到的問題），他可以通過向元素添加類來進行破解並應用「對象適合」與該類添加對嗎？ –

當然他可以，如果他只是使用'img'黑客手機圖片。對象適合的支持在老款Android手機中並不是那麼棒（4.4.4支持它，UC瀏覽器依然沒有）。我想他必須先決定他希望在支持方面有多落後。即使如此，這是一個非常冒險的伎倆。 –

如果我得到了正確的答案，你正試圖通過cr讓不同的視圖端口響應背景圖像在div.si裏面吃另一個img？

嘗試使用這個到你的div.si.

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

爲了使它雖然響應，您可能需要在較小的視口更新背景-size屬性。你或者需要犧牲一部分背景或者在較小的屏幕上擠壓它。

來源

2016-06-30 08:48:26 jowettgo

你可以嘗試在你的形象CSS補充一點：

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

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

來源

2016-06-30 09:10:55

如何將<img>作爲背景使用CSS或Javascript？

回答

相關問題