Центр элемента, который больше 100%

Question

У меня возникли проблемы с центрированием изображения, которое больше, чем его родительский элемент. Я установил минимальную ширину и минимальную высоту до 100%, чтобы изображение всегда заполняло родительский элемент.

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

Я думаю, я мог бы обойти эту проблему, когда я просто центрирую изображения, поэтому самая важная часть изображения не обрезается. Есть ли способ центрировать изображение, которое больше, чем его родительский элемент? (Без изменения родительского элемента ofc)

Я предпочел бы видеть ориентированный на css ответ вместо javascript из-за проблем с производительностью при пересечении большого количества изображений в DOM.

Вот часть скриншота из двух изображений, содержащихся в родительском http://d.pr/kEcb. Размеры изображений в порядке, но я не могу их центрировать.

Answer 1

Попробуйте что-нибудь в этом роде.

img/div/whatever { 
    left: 50%; 
    margin-left: **Half of image width** 
} 

Answer 2

Использования Переполнение свойства для родительского DIV , если вы хотите, чтобы просмотреть изображение, выходящее из использования сНа видна еще использование прокрутки

Answer 3

Самого простое решением CSS будет установить изображение в качестве background- образ родителя,

с {фона повторить: не повторять; фон положение: центр центр;}