居中和隱藏圖片，貼合格尺寸

Question

我需要在寬度960px div內居中放置寬度爲1400px的圖片，並且左側爲220px，右側爲220px。

<div style="width:960px;"> 
    <img src="src" style="width:1400px" /> 
</div> 

Answer 1

這與下面的CSS很簡單：

#wrapper { 
    position: relative; 
    overflow: hidden; 
    width: 960px; 
    height: 400px; 
} 
#wrapper img { 
    position: absolute; 
    left: -220px; 
    width: 1400px; 
} 

如果你不知道的高度，你可能會想使用負的左邊距或位置：相對。

#wrapper { 
    overflow: hidden; 
    width: 960px; 
} 
#wrapper img { 
    position: relative; 
    left: -220px; 
    display: block; 
} 

如果圖像的大小是動態的，你可以嘗試這樣的事：

#wrapper { 
    width: 960px; 
    overflow: hidden; 
} 
#wrapper .inner { 
    width: 10000px; 
    position: relative; 
    left: -4520px; /* 5000 minus half the wrapper width */ 

} 
#wrapper .inner img { 
    display: block; 
    margin: 0 auto; 
} 

注意，這需要一個額外的包裝，.inner。

Answer 2

嘗試：

div {overflow:hidden;} 
img {margin-left: -220px;} 

Answer 3

如果你知道圖像的寬度，你可以使用CSS很容易地將它居中。如果圖像寬度改變，你可能不得不使用一點JS。

http://jsfiddle.net/gr8DE/1/

Answer 4

我想CSS clip可以做的工作。檢查this article的進出。