Как сделать чтобы высота тега figure зависела от содержимого?

Question

[Lazy10]

ширина картинок равняется ширине блока figure, чтобы вместе с блоком маштабировались и эти картинки, но проблемы с высотой блока, под изображениями виднеется фон самого блока figure, а если установить у figure высоту, то при уменьшении экрана его высота остается фиксированной, как можно это исправить?

codepen.io/anon/pen/XXeVXv

Answer 1

[Денис Васильев]

figure img {
  max-width: 100%;
  vertical-align: middle; /* либо vertical-align: top / vertical-align: bottom */
}

/* Либо так */
figure img {
  max-width: 100%;
  display: block;
}

codepen.io/corvus-007/pen/bEoazz?editors=110

Comments

[Lazy10]

Спасибо) не понятно одно, свойство vertical-align выравнивает по высоте, но при выравнивании по центру каким образом полоса исчезает, изображение маштабируется по высоте или как ?

[glenean]

vertical-align: block; по-моему не бывает https://developer.mozilla.org/en/docs/Web/CSS/vert...
vertical-align: middle; - очень хорошее решение.

[Денис Васильев]

glenean: Да, я ошибся, должно быть display: block; Спасибо., сейчас поправлю.

Answer 2

[glenean]

Сделать это можно вот так: codepen.io/anon/pen/ZQXvyg
добавить margin-bottom: -4px;
было:

figure img {
    max-width: 100%;
}

стало:

figure img {
    max-width: 100%;
    margin-bottom: -4px;
}

Comments

[Lazy10]

Спасибо большое)

[glenean]

Lazy10: Посмотрите, только, может в других браузерах этой полоски не было

[Lazy10]

glenean: проверил, в Chrome, firefox'е и IE полоска была. Не могу понять, откуда она появилась, ведь я установил у img margin:0, после этого ничего не должно было быть, а тут отступ..

[glenean]

Есть еще такой вариант:

figure {
...
max-height: 1px;
}

codepen.io/anon/pen/qbPpYR

[Lazy10]

glenean: отличный вариант, работает, спасибо)