Make full width image centered in div

Question

I got a div container that has a max height of 400 pixels. I'm placing a pretty large image inside the container. Since the container has a max height it's obviously cutting off most of the picture, which is what I'm aiming for. But my only issue is trying to get the image to center inside the div, so the main part of the picture is shown.

Here is the code I have currently:

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

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

@drew_w I think we can assume vertical, since a full-width image is centered by definition — Jordan Foreman, Feb 18 '14 at 17:09
http://jsfiddle.net/abzWz/1/ resize & center inside a div as background. replace contain with cover if you want to crop. — cocco, Feb 18 '14 at 17:11
@JordanForeman From what I know, the default horizontal alignment depends on "position" (absolute/relative, etc), "text-align" and a few other css properties on the parent as well. I don't like to make assumptions about what the OP has chosen to do with their CSS... — drew_w, Feb 18 '14 at 17:12
@Dondada What about the jsfiddle i presented? http://jsfiddle.net/Morlock0821/prdBb/1/ — Pedro Estrada, Feb 18 '14 at 18:02
@PedroEstrada I can't use the background selector in CSS. If you see the code above I'm placing the img inside the div with an image tag. — Dondada, Feb 18 '14 at 18:05
@Dondada This way is ok? http://jsfiddle.net/Morlock0821/enhLc/ — Pedro Estrada, Feb 18 '14 at 18:07
@PedroEstrada thats much closer. I forgot to mention i'm using bootstrap and have an img-responsive class that adds max-width: 100% to the image and an auto height. — Dondada, Feb 18 '14 at 18:11
@Dondada - I believe [this is the answer](http://stackoverflow.com/a/16642842/1846192) you are after. — Mathijs Flietstra, Feb 18 '14 at 19:08

score 2 · Answer 1 · answered Feb 18 '14 at 17:11

2

Try using:

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

answered Feb 18 '14 at 17:11

RealDeepak

823
6
9

score 0 · Answer 2 · edited Feb 18 '14 at 17:19

0

Simple use : text-align:center

live example is here >>>>

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

edited Feb 18 '14 at 17:19

Pedro Estrada

2,384
2
16
24

answered Feb 18 '14 at 17:17

Suraj Rawat

3,685
22
33

what is happening there did u see the jsfiddle page ? – Suraj Rawat Feb 19 '14 at 05:14

Make full width image centered in div

2 Answers2

Linked