How to set CSS image width with respect to grandparent div

Question

I am creating a "light box" sort of effect. Without using JavaScript, how can I make the light box resize according to the viewport size so that it always stays in the center of the viewport and occupy 80% of the width and height?

<div class="fullscreen-dim">
    <div class="dialog">
        <img src="http://placehold.it/300x200">
        <a class="close-button" href="#">CLOSE</a>
    </div>
</div>

.fullscreen-dim {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
    padding: 20px; // to create a "border" around the image;
    position: fixed;
    background-color: red;
    left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: 80%;    
}
a {
    position: absolute;
    bottom: 5px; right: 5px;
}

In this method http://jsfiddle.net/3Lohtes9/ , the dialog resizes but the image does not respect aspect ratio.

This problem can also be interpreted as one of the "grandparent div" questions on SO. How can I set the image size with respect to full-screendim and let dialog to auto-size to fit?

EDIT: Instead of enclosing the img in the dialog div, I can achieve a similar visual effect of having the border around the image and still have the image resize accordingly when viewport size changes. However, I have no way to place the close button now. Any advice?

Firstly, remove the height% from the img CSS, it will then respect the aspect ratio, as the height will be calculated dynamically based on its width and the size of the image. — James Hay, Aug 25 '14 at 03:04

Devin · Answer 1 · 2014-08-25T03:18:50.023

Change .dialog height from 80% to auto. See fiddle

    .fullscreen-dim {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    height: 100%;
}
.dialog {
    padding: 20px;
    // to create a"border" around the image;
    position: fixed;
    background-color: red;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: auto;
}
a {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

edit:

try adding this if you want more control (like a min-height) or simply remove all height and width from .dialog:

width: auto;
    max-width:80%;
    height:auto;
    max-height:80%;
    min-height: 100px;

new fiddle

Tried this, but if the viewport height is short, the image should not get "cut" off. The dialog should resize both width and height to fit inside the viewport. — Jake, Aug 25 '14 at 03:10

score 0 · Answer 2 · edited May 23 '17 at 12:13

Using the information from this question, you can set the image to be aligned horizontally within the lightbox. Then by removing the height of the image, it will scale correctly with the aspect ratio.

The key CSS changes are here

img {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dialog {
    padding: 20px; // to create a "border" around the image;
    position: fixed;
    background-color: red;
    left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80%;
    height: 80%;    
    white-space: nowrap;

    text-align: center; margin: 1em 0;
}

And the HTML

<div class="fullscreen-dim">
    <div class="dialog">
        <span class="helper"></span>
        <img src="http://placehold.it/300x200"/>
        <a class="close-button" href="#">CLOSE</a>
    </div>
 </div>

See fiddle: http://jsfiddle.net/3Lohtes9/7/

If you make the viewport short enough, the image overflows the dialog. — Jake, Aug 25 '14 at 03:55

score 0 · Answer 3 · answered Aug 25 '14 at 03:15

Instead of all of this

.dialog { // dialog should auto-size just big enought to wrap image padding: 20px; // to create a "border" around the image; position: fixed; background-color: red; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; height: 80%; }

try

.dialog { // dialog should auto-size just big enought to wrap image padding: 20px; // to create a "border" around the image; position: fixed; background-color: red; left: 10%; top: 10%; right: 10%; bottom: 10% }

This centers the dialog, but doesn't really address the image size issue? — Jake, Aug 25 '14 at 03:56

How to set CSS image width with respect to grandparent div

3 Answers3