大頁邊距

我有一張想要達到特定效果的圖像。基本上，當您將瀏覽器窗口設置得更小時，我想同樣裁剪左側和右側，以便圖像不會調整大小，並始終看到中心。大頁邊距

我已經做到了這一點通過以下方式：

<style> 
    .banner{ 
     text-align: center; 
     overflow: hidden; 
     height: 350px; 
     position: relative; 
    } 

    .banner img{ 
     position: relative; 
     left: 300%; 
     margin-left: -600%; 
    } 
</style> 

<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>

的js小提琴：https://jsfiddle.net/szsj6f9m/

有一件事我已經使用這種方法注意到的是，如果我左邊是100％，保證金左是-200％圖像將在中途開始滑回到右側。我不完全明白爲什麼，我只知道我需要將百分比設置爲300％，因此它在320像素的屏幕上表現正確。

這裏的例子是什麼，我說什麼，只是調整您的瀏覽器，從小到大，你會看到什麼我談論：

的js小提琴：https://jsfiddle.net/szsj6f9m/1/

我的問題是這樣的：

到目前爲止屏幕的位置是否可行並在其上放置瞭如此大的左邊距？從小型設備或任何設備的性能角度來看，這是否會導致任何類型的問題？你有什麼理由可以這樣說嗎？

來源

2017-03-01 Bojan

我個人使用left:50%;transform:translate(-50%,0);（作品甚至垂直居中）top:50%;transform:translate(0,-50%);https://jsfiddle.net/szsj6f9m/3/

來源

2017-03-01 20:51:03

這將爲IE9的支持和起來，我相信我的版本是瀏覽器甚至早於這一點。然而，這也是一個很好的方法，謝謝你。 – Bojan

@Bagzli說實話...不要打擾古老的瀏覽器...這是深入到開發者和客戶的地獄之路。：\ - 當有人訪問我曾參與的較大項目的網站時，我只是觸發覆蓋彈出窗口，背景正確呈現爲屏幕截圖（模糊），並強制訪問者爲所有人升級瀏覽器。 –

我有重定向，但我正在爲其他人編寫此代碼，我希望他們有自己的選擇，並自己做出決定。 – Bojan

回答

相關問題