Как указать изображению занимаемую часть div?

Question

[goodcucumber]

Есть поля сетки grid, в них необходимо положить изображение, которое больше этих полей, так чтоб еще 15-20% от этого поля оставалось свободным под подпись этого изображения. Как это реализовать ?

Comments

[Ankhena]

width: 80% или 85%

Либо использовать figure, а внутри img и figcaption.

Либо разбить сетку грида.

[Froggyweb]

хоть бы картинку сделал по высоте или ширине :)

Answer 1

[Роман]

<figure>
  <img src="..">
  <figcaption>подпись</figcaption>
</figure>

figure {
  position: relative;
}
figcaption {
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Answer 2

[Elena Fire]

В поле сетки положить еще один div для картинки, задать ему нужные размеры, оставить место для подписи.