Как добавить границу к изображению, скрытому частично?

Question

Это мой код (если изображение имеет высоту больше, чем 100px затем показать только первые 100px изображения и скрыть остальное):

HTML:

<div> 
    <img> 
</div> 

CSS:

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

Теперь мне нужно добавить границу из 5px:

img{ 
    border:solid 5px #555555; 
} 

но если изображение имеет высоту выше 100 пикселей, нижняя граница не отображается. Как я могу это разрешить?

Answer 1

Это потому, что переполнение div скрыто. Вместо этого вы должны установить границу в div. Таким образом, div будет занимать только высоту изображения, но после 100px он сохранит границу, но изображение не покажет прошлое. Тем не менее, вам нужно будет настроить ширину div для соответствия изображению.

<span><img src="" /></span> 

span{ 
    max-height:100px; 
    border:solid 5px #555; 
    overflow: hidden; 
    display: inline-block 
} 

img { 
    width: 200px; /* image width */ 
    height: 200px; /* image height */ 
} 

Используя пролет с display: inline-block вам больше не нужно устанавливать ширину внешнего контейнера.

Вопрос: Если размер изображения меньше 100px, между дном изображения и внешним контейнером имеется небольшой промежуток.

demo

Answer 2

Заглянуть, если это то, что вам нужно:

• (первая попытка) http://jsfiddle.net/Vn4PM/
• (последняя попытка) http://jsfiddle.net/Vn4PM/11/

HTML (с образцами графики) :

<div> 
    <img src="http://www.dummyimage.com/100x150/ffff00/fff" /> 
</div>​ 
<div> 
    <img src="http://www.dummyimage.com/100x50/ffff00/fff" /> 
</div>​ 

CSS:

div { 
    max-height: 100px; 
    border: solid 5px #555555; 
    overflow: hidden; 
    display: inline-block; 
} 

img { margin-bottom: -5px; }​ 

-

• дисплей: встроенный блок и границы добавлены в Див так граница будет обертка вокруг изображения
• в недостаточной мере внизу добавлено к img so дополнительный пробег скрыт