Prevent overflow by scaling content smaller

debugcn Published at Dev

clankill3r

I want an (animated gif) image in the left top corner. It should never be bigger then the actual size of the image. If the body is to small to show the whole image then the image should be shown smaller, proportional!

I had it working with using a background-image but I want to replay the gif by clicking on it and this didn't work using a background image so I went back to using an image tag.

In the width it works well, however, in the height it does not.

width = good:

enter image description here

height = not good:

enter image description here

Here the code:

<div id="gifdiv">
    <img src="images/someImg.png"/>
</div>





    body {

        padding: 0;
        border: 0;
        margin: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #gifdiv {
        width: 100%;
        height: 100%;
        max-width: 660px;
        max-height: 370px;
    }

    img {
        width: 100%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat; 
    }

Here the code, in case it matters.

    $(document).ready(function() {

        $("#gifdiv").click(function () {
            // first time we replace png to gif
            // after that we just set the same thing again
            // which makes the gif play again from the start            
            var img = $(this).find("img").get(0);  
            var imgSrc = img.src;
            imgSrc = imgSrc.replace(".png", ".gif");
            img.src = imgSrc;     

      });

    });

So how can I make the height not exceed the window height?

a fiddle (without a gif) http://jsfiddle.net/clankill3r/gLmdwqg8/

Pierre Granger

I think this could be enough :

img {
    max-width: 100%;
    max-height: 100%;
    background-size: contain;
    background-repeat: no-repeat; 
}

Your main problem here is that as your image is 100% width, the height (auto or not) can't be reduced if there is not enough place.

http://jsfiddle.net/gLmdwqg8/1/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-6

Comments

0 comments

From Dev

Related Related

Article

Prevent overflow by scaling content smaller

Prevent overflow by scaling content smaller

CSS center with translate and prevent content overflow

How to prevent a flex item from shrinking smaller than its content?

Prevent div from going smaller than its content when resizing

How to fit content in a row and prevent overflow in react-native?

How to prevent a flex item height to overflow due to it's content

Image not scaling smaller as the resolution decreases

Image not scaling smaller as the resolution decreases

CSS Hover Scaling is unhiding overflow hidden content briefly then re-hiding

Prevent GridView from scaling

Prevent vertical overflow with CSS

Prevent banner overflow

Prevent flexbox overflow

When screen is smaller then x y use overflow

Content overflow outside the div

Div content overflow

Div content overflow

iOS scaling with CGAffineTransformMakeScale on drawRect content

Scale Checkbox without scaling content

CSS Background Naturaly Scaling content

prevent text to line break if overflow

Prevent overflow / rubberband scrolling on iOS

Prevent Overflow Horizontal Scroll on page

Fabric JS: How to prevent scaling active group

Prevent DIV from moving when scaling

How to prevent Grid's children from scaling?

Prevent DIV from moving when scaling

How to prevent "bigger text" (font scaling) on iPhone

Table content overflow to other divs

fixed css menu not to overflow content