Cách ẩn một phần của hình ảnh?

Question

Tôi cần thực hiện việc này:

nếu hình ảnh có chiều cao cao hơn 100px rồi ẩn phần còn lại của hình ảnh (ví dụ: hình ảnh có chiều cao 80px -> hiển thị hình ảnh đầy đủ, hình ảnh có chiều cao 150px -> hiển thị chỉ 100px đầu tiên).

Có cách nào để làm điều đó với CSS không?

Answer 1

Bạn có thể sử dụng thuộc tính max-height để chỉ định chiều cao tối đa của hình ảnh, sau đó sử dụng overflow: hidden; để ẩn bất kỳ thứ gì khác.

ví dụ:

HTML:

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

CSS:

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

JSFiddle mẫu: http://jsfiddle.net/3jA9q/

EDIT

cho Internet Explorer 6, bạn có thể sử dụng CSS expressions bắt chước someth ing tương tự:

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

Tuy nhiên, lưu ý rằng điều này yêu cầu người dùng phải bật JavaScript trong trình duyệt của họ. Tuy nhiên, kinh nghiệm của tôi với các biểu thức CSS khá kém và tốt nhất nên tránh chúng.

Answer 2

Đặt nó trong một div với chiều cao 100px và thiết lập overflow: hidden;

Answer 3

Bạn có thể làm điều đó bằng cách sử dụng combnation của max-height và overflow.

HTML:

<div> 
    <img> 
</div> 

CSS:

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

Cũng lưu ý rằng max-height không hoạt động trong các trình duyệt cũ, nhưng nếu bạn sử dụng bình thường height sau đó hình ảnh không bao giờ có thể là ngắn hơn 100px một trong hai.