Как заполнить и центрировать изображение с помощью CSS? ⇐ CSS

[Anonymous]

У меня есть изображение произвольной формы и размера, которое я хочу увеличить в содержащий его элемент div, не изменяя его пропорции и не обрезая часть изображения.
Ниже приведена диаграмма что я имею в виду:




Обратите внимание, что изображение иногда центрируется по вертикали, а иногда по горизонтали.
Если изображение всегда широкое, я могу использовать:

Код: Выделить всё

img {
width: 100%;
height: auto;
margin: auto;
}

но это не сработает, если изображение уже, так как в конечном итоге оно будет обрезано сверху и снизу.
Есть ли способ , возможно, с использованием сетки или гибкой конструкции, которая будет вмещать изображение?

Подробнее здесь: https://stackoverflow.com/questions/692 ... -uinsg-css