CODEWITHSUNDEEP
htmlcssvertical-alignment
zork media
zork media

Reputation: 972

Vertically center image when image is higher than container

I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.

I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:

verticaly centered image

The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have 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.

Upvotes: 11

Views: 5095

Answers (5)

Cozzbie
Cozzbie

Reputation: 1055

On the element you want centered.

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

on its parent.

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

Use a polyfill to render cross browser styles.

Upvotes: 0

Vandervals
Vandervals

Reputation: 6054

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 just like the background-size rules cover 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 is very new and doesn't work on ie or Edge yet. Pen here: http://codepen.io/vandervals/pen/MwKKrm

EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

If image size is small it will be arranged in vertical middle and if its big, it will fit in box.

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!

Upvotes: 1

web-tiki
web-tiki

Reputation: 103750

You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly 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>

Upvotes: 7

albebonv
albebonv

Reputation: 81

.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/

Upvotes: 1

Related Questions