Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically center image on page and maintain aspect ratio on resize

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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.

    #161137
    Paulie_D
    Moderator

    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.

    #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>
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.