Vertically center image when image is taller than container

Question

I have a responsive design with a header image that fits in a container. The image has a width:100%; and height:auto; , therefore, it increases with increasing viewing area. I do not want to exceed a certain height, so the container has max-height . The image is still growing, but now the bottom is cropped because it aligns with the top of the container.

I want the image to remain vertically centered in the container, so that parts of the image are cut off from above and below. The result should look like this:

Header images are uploaded by users, so they can have different heights, so I can’t work with certain pixel values. Is there a CSS solution for this or do I need to use JavaScript?

Here is the code:

 .wrapper { width: 90%; max-width: 600px; margin: 1em auto; background-color: #E9ADAD; } .container { text-align: center; height: auto; line-height: 200px; max-height: 200px; overflow: hidden; } img { width: 100%; height: auto !important; vertical-align: middle; } 

 <div class="wrapper"> <div class="container"> <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered"> </div> </div> 

And I prepared a fiddle .

Answer 1

You can use absolute positioning for your image, negative top / bottom values ​​and margin:auto; To vertically center the image in the container:

 .wrapper { width: 90%; max-width: 600px; margin: 1em auto; background-color: #E9ADAD; max-height: 200px; } .container { position:relative; padding-bottom:40%; overflow: hidden; } img { position:absolute; top:-50%; bottom:-50%; margin:auto; width: 100%; height: auto; } 

 <div class="wrapper"> <div class="container"> <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered"> </div> </div> 

Answer 2

Not so long ago there was only a javascript way to do this, but now we have some CSS rules: object-fit and object-position

They work the same as the background cover rules, and contain:

 .container img{ width: 100%; height: auto; } @supports(object-fit: cover){ .container img{ height: 100%; object-fit: cover; object-position: center center; } } 

The problem with this approach is that it is very new and does not work on ie or Edge. Pen here: http://codepen.io/vandervals/pen/MwKKrm

EDIT: Please make sure you need to declare the width and height of the image, or it will not work.

Answer 3

 .wrapper { width: 90%; max-width: 600px; margin: 1em auto; } .container { height: 200px; overflow: hidden; } .imgWrapper { position: relative; width: 200%; height: 200%; top: -50%; left: -50%; } img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: auto; width: 50%; } 

 <div class="wrapper"> <div class="container"> <div class="imgWrapper"><img src="http://placehold.it/600x300"></div> </div> </div> 

http://jsfiddle.net/ghygpw8t/5/

inspired by: https://css-tricks.com/perfect-full-page-background-image/

Answer 4

Try it like this: Demo

If the image size is small, it will be located vertically and, if it is large, it will fit in the field.

CSS

  .wrapper { width: 90%; max-width: 600px; margin: 1em auto; } .container { text-align: center; line-height: 200px; overflow: hidden; background-color:#ccc; vertical-align:middle; height: 200px; border:2px solid green; display: flex; width: 100%; align-items: center; justify-content: center; } img { width: 100%; max-height: 196px; border:2px solid red; vertical-align: middle; line-height: 196px; } 

Hope this is what you want!

Answer 5

In the element you want to center.

 .element { position: relative; top: 50%; transform: translateY(-50%); } 

for his parent.

 .parent { transform-style: preserve-3d; } 

Use polyfill to visualize cross browser styles.