如何隱藏部分圖片？

如果圖像具有100像素的高度高於隱藏圖像（例如其餘：圖像與80px高度 - >顯示完整的圖像，具有150像素的高度圖像 - >展只有第一個100px）。

有沒有辦法做到這一點與CSS？

2012-06-18 xRobot

您可以使用max-height屬性指定圖像的最大高度，然後使用overflow: hidden;來隱藏其他任何內容。

例如

HTML：

<div class="image-container"> 
    <img src="some-image.jpg" /> 
</div>

CSS：

.image-container { 
    max-height:100px; 
    overflow:hidden; 
}

編輯

對於Internet Explorer 6，您可以使用CSS expressions效仿someth荷蘭國際集團類似：然而

.image-container { 
    height:expression(this.scrollHeight<100?"auto":"100px"); 
    overflow:hidden; 
}

請注意，這需要用戶在他們的瀏覽器中啓用JavaScript。然而，我對CSS表達式的體驗相當糟糕，最好避免使用它們。

2012-06-18 22:47:26

max-height在Internet Explorer中不起作用:( – xRobot

@xRobot它以IE7開頭https：// developer .mozilla.org/en/CSS/max-height＃Browser_compatibility –

只有Internet Explorer 6和更早的版本纔會使用'height'，因爲@Jcubed說。 –

與100px的高度把它放在一個div，並設置overflow: hidden;

2012-06-18 22:45:25 Brandon

可以使用的max-height和overflow一個combnation做到這一點。

HTML：

<div> 
    <img> 
</div>

CSS：

div{ 
    max-height:100px; 
    overflow:hidden; 
}

還要注意的是max-height不舊的瀏覽器，但如果你使用正常height然後圖像可以永遠不會比100像素或者更短。

2012-06-18 22:46:09

但如果我使用高度，那麼高度爲50px的圖像將會失真。 – xRobot

我說的是在div上使用高度，而不是img。在100像素div中的50px高的圖像不會被扭曲，但在它之後只有50px的空隙。 –

@xRobot - 它們應該沒問題，因爲你設置的是包裝div的大小，而不是圖像本身。然而，你會在圖片下留下很大的空白，這是不受歡迎的，但對於舊版瀏覽器可能不太合適。 –

回答