Есть блок с фиксированной высотой и шириной. Задача в том, чтобы поместить в него картинку, которая будет немного выступать сверху, но только если она действительно больше этого блока. Если картинка по высоте меньше этого блока, то она должна прилипнуть к низу, а не к верху. Казалось бы задача может легко решится при помощи position: absolute; bottom: 0;
, но тут ещё одна особенность: в ширину картинка также может быть совершенно любого размера и нужно, чтобы она автоматически центрировалась при помощи text-align: center;
или margin: auto;
и работал width: auto
, что невозможно с абсолютным позиционированием.
Вот всё, что у меня сейчас есть: https://jsfiddle.net/dfrj0sn5/1/ Здесь картинка прилипает к верху блока и выступает снизу, нужно наоборот.
Как бы это решить при помощи css?