如何僅用CSS顯示圖像的頂部部分？

Question

如果圖像比115像素高，我只想在方形容器中顯示頂部115像素。我用下面的這個嘗試：

http://jsfiddle.net/3mRh9/

但我還是看到整個圖像。我如何總是隻使用CSS顯示圖像的頂部？

代碼：

<div> 
    <div class="floated"> 
     <a class="limited"> 
      <img src="http://change.gov/page/-/officialportrait.jpg"/> 
     </a> 
    </div> 
</div> 


.floated { 
    border: 1px solid blue; 
    float: left; 
} 
.limited { 
    width: 115px; 
    height: 115px; 
    overflow: hidden; 
    border: 1px solid red; 
} 
img { 
    max-width: 115px; 
} 

Answer 1

http://jsfiddle.net/3mRh9/1/

添加display: block您.limited風格。

.limited { 
    width: 115px; 
    height: 115px; 
    overflow: hidden; 
    border: 1px solid red; 
    display: block; 
} 

<a>標籤是直列默認，和內聯元素不能有寬度或高度。

或者，也可以只用一個塊級元素包裹，像div，代替（fiddle）：

<div> 
    <div class="floated"> 
     <div class="limited"> 
      <a href="http://example.com"> 
       <img src="http://change.gov/page/-/officialportrait.jpg"/> 
      </a> 
     </div> 
    </div> 
</div> 

Answer 2

有將允許此爲僅示出一個圖像的一部分的特性。

這是clip但它只適用於絕對定位的對象。

JSFiddle Demo.

HTML

<div> 
    <div class="floated"> 
     <a class="limited"> 
      <img src="http://change.gov/page/-/officialportrait.jpg"/> 
     </a> 
    </div> 
</div> 

CSS

.floated { 
    border: 1px solid blue; 
    float: left; 
} 
.limited { 
    width: 115px; 
    height: 115px; 
    display:block; 
    border: 1px solid red; 
    position:relative; 
} 

img { 
    position:absolute; 
    clip:rect(0px,115px,115px,0px); 

} 

我不知道這是否是你後的效果，但它是你問什麼。