爲什麼嘰嘰喳喳實現這樣

全屏圖像中有twitter.In源代碼的頭版一個完整的畫面，他們做這樣的事情：爲什麼嘰嘰喳喳實現這樣

HTML：

<div class="front-bg"> 
<img class="front-image" src="xxx.jpg"> 
</div>

CSS：

.front-bg { 
position: fixed; 
width: 200%; 
height: 200%; 
left: -50%; 
} 
.front-bg img { 
margin: auto; 
min-width: 50%; 
min-height: 50%; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
}

爲什麼他們將top/left屬性設置爲「.front-bg img」？如果我改變這樣的：

.front-bg { 
position: fixed; 
width: 100%; 
height: 100%; 
} 
.front-bg img { 
min-width: 100%; 
min-height: 100%; 
}

它的工作原理也是如此。爲什麼他們將寬度設置爲200％？

來源

2013-02-22 Chef

我認爲這是考慮到不同長寬比的不同屏幕，所以圖片的中心總是居中，並且邊緣上有足夠的「空餘」，無論屏幕是縱向還是橫向。

來源

2013-02-22 15:04:21

我也這麼認爲..但嘗試上面提到的編輯和調整兩個版本的窗口大小似乎具有相同的效果。 – dev 2013-02-22 15:06:52

我的最佳猜測是，儘管編輯後的代碼可能在您的瀏覽器上運行，但可能會有舊的瀏覽器無法正常工作，這是爲了糾正錯誤。 – 2013-02-22 17:44:37

你們可以在舊的瀏覽器上做一些測試嗎？我來自中國。由於那些共產主義混蛋，它使用ietester很難訪問嘰嘰喳喳。 – Chef 2013-02-23 10:54:48

{top：0;左：0;正確：0;底部：0; }

這部分沒有在桌面上使用，因爲這個圖像沒有位置屬性設置，也許它在不同的設備上使用其他媒體查詢？

我想說背後的原因200％/ 200％和定位保證金必須做一些事情，以圖像爲中心的優先方式。使用％100 /％100場景圖片時，將始終左對齊較小屏幕上瀏覽器窗口的左邊框。應用

margin：0 auto;最小寬度：50％;

它們使其與瀏覽器窗口一樣寬且始終居中。

來源

2013-02-22 15:14:20

爲什麼嘰嘰喳喳實現這樣

回答

相關問題