Центральное изображение горизонтально с динамической шириной с переполнением скрытого родителя

Question

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

я могу добиться этого довольно легко в CSS так:

.parent { 
    width: 640px; 
    min-height: 560px; 
    height: 100%; 
    overflow: hidden; 
} 
.parent img { 
    min-height: 560px; 
    height: 100%; 
    width: auto; 
} 

Только проблема в том, что IMG всегда будет выравнивание по левому краю. Как мне сосредоточить его на родительском?

Если я использую фоновое изображение, изображение не будет изменено в соответствии с общей высотой родителя. Я не хочу использовать свойство css3 background-size из-за отсутствия поддержки в ie7 & 8.

Есть несколько вопросов по поводу stackoverflow, связанных с этим, но ни один из них (я не могу найти) адрес проблема в отношении переменной ширины & высота изображение.

Answer 1

Использование: текст в строке: center; будет делать трюк:

.parent { 
    text-align: center; 
    width: 640px; 
    min-height: 560px; 
    height: 100%; 
    overflow: hidden; 
} 

.parent img { 
    min-height: 560px; 
    height: 100%; 
    width: auto; 
} 

Answer 2

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

Для этого вам понадобится 2 родительских divs, и в основном внутренний div будет иметь большую ширину, чем любые возможные изображения внутри него. Мы центрируем его горизонтально внутри внешнего div, и таким образом мы можем использовать выравнивание по тексту: центр для выравнивания изображения.

.mask { 
 
    width: 400px; 
 
    overflow: hidden; 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.imgctn { 
 
    position: absolute; 
 
    width: 1000px; 
 
    left: 50%; 
 
    margin-left: -500px; 
 
    text-align: center; 
 
    height: 100%; 
 
} 
 
.imgctn img { 
 
    height: 100%; 
 
}

<div class="mask"> 
 
    <div class="imgctn"> 
 
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" /> 
 
    </div> 
 
</div>

Надеется, что это помогает.