Constrain table height and image to height of container

StackOverflow https://stackoverflow.com/questions/22202192

  •  08-06-2023
  •  | 
  •  

Question

I have the following test here: http://dev.driz.co.uk/gallery/index2.php

The idea is that an image should be centred within the gallery div and have 72px of padding all the way around it. If the image is smaller than the screen, then it will be centred (this part works), however if the image is larger than the screen then it should resize itself to fit depending on the best ratio.

This is achieved by setting the image max-height and max-width to 100% so the image is constrained by its container element. And in this case the container is two faked tables with CSS to centre it on the page.

What's actually happening is the image is just ignoring the max-height property and only applying the width constrain, so it appears off the page.

Any ideas on what the issue is? In the past I have just used JavaScript to position the image in the middle, but would prefer to use just CSS like in the example.

Full code is as follows:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Center</title>
        <style type="text/css">

            *
            {
                margin: 0;
                padding: 0;
                border; 0;
            }

            html,body
            {
                height: 100%;
                width: 100%;
            }

            body
            {
                overflow: hidden;
            }

            .gallery
            {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
            }

            .gallery-background
            {
                background: #333333;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                position: fixed;
                padding: 72px;
            }

            .gallery-outer
            {
                display: table;
                width: 100%;
                height: 100%;
                border-collapse: collapse;
                table-layout:fixed;
            }
                .gallery-inner
                {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                    width: 100%;
                    height: 100%;
                }

            .gallery-image
            {
                position: relative;

            }

            .gallery-image img
            {
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;


            }

        </style>
    </head>
    <body class="default">

        <div class="gallery">
            <div class="gallery-background">

                <div class="gallery-outer">
                    <div class="gallery-inner">

                        <div class="gallery-image">
                            <img src="EmpireState.jpg">
                        </div>

                    </div>
                </div>

            </div>
        </div>      

    </body>
</html>
Was it helpful?

Solution

When you give an image a max-height of 100%, it looks for its direct parent tag's height. If that doesn't have a height or constrained in anyway, then it can't apply the rule to height of the image. Looking at your HTML/CSS, I would strip it back and simplify it like this: 

<div class="gallery">
    <div class="gallery-background">
        <img src="EmpireState.jpg">
    </div>
</div>

And the CSS

.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}

.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}

.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;  
height: 100%;
}

.gallery-background img {
 max-height: 100%;
max-width: 100%;
vertical-align: middle; 
}

Hopefully that should sort it out

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top