Сделать изображение полной ширины в центре div

Question

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

Вот код, у меня в данный момент:

<div class="headerimg"> 
<img src="www.jpg.com"/> 
</div> 

.headerimg { max-height: 400px; overflow: hidden; } 
.header img { width: 100%; height: auto; } 

Answer 1

Попробуйте использовать:

div.container { 
    margin: 0 auto; 
    width: 900px; 
} 
div.container img { 
    max-height:400px; 
} 

Answer 2

Простое использование: выравнивания текста: центр

live example is here >>>>

div{ 
    max-height:400px; 
    border:1px solid red;  
    text-align:center; 
} 
div img{ 
    height:500px; 
    width:200px; 
}