how to do image scaling with window size

Question

Seems so simple, but ...

scale image size with window size?

1)create a container for the image = entire window width, so container grows with window width
2)slap image inside the container
3)scale image based on % of the width of the container

HTML

<div class="imgEnclosure">
<img class="validatedImage"
     src="1776_Support/images/check_mark.png" alt="thisImage"
     onclick="SwapImages(this); return false" />
</div>

CSS

.imgEnclosure {
    width: 100%;
}

.validatedImage {
    /* original size (w,h) = 220px by 108px */
    
    /*
        1.0em = font-size: 24px from html Selector
        so ... original size = 9.167em by 4.500em
    */
    
    max-width: 30%;
    min-width: 10%;
    
    height: auto;
}

The image shows the same size no matter how I change the browser window width.

score 0 · Accepted Answer · answered Jan 15 '21 at 05:29

Good Grief ...

Instead of:

max-width: 30%;
min-width: 10%;

Use

width: 30%;

Honestly, I could not ask for a simpler answer ... even though I do not understand why the max-, min-width response does not work?

score 0 · Answer 2 · answered Jan 15 '21 at 05:57

I am not sure as to why it didn't work , I believe it could be an error in styling in the parent element or forced styling from parent elements that transferred to the child element .

Did you try placing the

max-width: 30%; min-width: 10%;

in your .imgEnclosure and not the img class itself? Maybe that would have worked too. I normally place positional styles in parent elements so that child elements would easily inherit the styling properties.

Regardless: do check out this as it might answer your question! hope this helped :)

the answers containing questions are hard to process and adapt. please, verify if you can provide a working example by modifying the code excerpts from the question or providing your own. — Leo Y, Jan 17 '21 at 18:54

how to do image scaling with window size

2 Answers2