Vertically center image on page and maintain aspect ratio on resize - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
January 25, 2014 at 12:25 pm #161120
croydon86
Participant
Hey guys

I am trying to do the following…
1. Have an image that will always be horizontally and vertically centered on a page, whatever the screen size.
2. Maintain aspect ratio after resizing the viewport.
3. Have some text that will always be visible at the bottom of the viewport.
I have come up with two half solutions so far…

Solution 1 – http://jsfiddle.net/5jphd/ – This works but does not maintain aspect ratio.

Solution 2 – http://jsfiddle.net/FAzBq/ – This maintains aspect ratio but is not vertically centered.

I am looking for a solution that combines both the above.

Look forward to any helpful suggestions you may have.
January 26, 2014 at 6:48 am #161137

Paulie_D
Member

How would the image resize? At what point?

Do you want to scale it with the viewport…it’s unclear?

I’m also not clear on what the purpose of this is supposed to be.

January 26, 2014 at 8:35 am #161141
paulob
Participant
Hi,

This is probably a bit simplistic and won’t account for very tall images that well but I’d do something like this: (IE8+ only + all other browsers)
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, .wrap {
    height:100%;
    margin:0;
    padding:0
}
.wrap {
    display:table;
    width:100%;
}
.mid, .base {
    display:table-row;
    text-align:center
}
.base { height:1px; }
.image {
    vertical-align:middle;
    display:table-cell
}
.image img {
    width:50%;
    height:auto;
}
</style>
</head>
<body>
<div class="wrap">
        <div class="mid">
                <div class="image"><img src="//upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" alt="bay view"></div>
        </div>
        <div class="base">This is the caption at the bottom of the window</div>
</div>
</body>
</html>
```
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.