Svg contained in DIV does not follow "max-height: 100%"

Navigation
1

See the example structure first. 

.follow-window-size-container {
    height: 100vh;
    background-color: green;
}

container-of-svg {
    max-height: 100%;
}

container-of-svg svg {
    max-height: 100%;
}
<div class="follow-window-size-container">
    <div class="container-of-svg">
        <img src="http://imgh.us/EU_food_contact_material_symbol.svg"alt="">
    </div>
</div>

My goal is for the SVG image (along with its container) to compress and follow the same height as follow-window-size-container (which follows the height of the window).

The right thing would be to work this way, I think, since max-height forces the element not to exceed a certain height. Strangely, I can not use it now ...

    
asked by anonymous 02.03.2015 / 23:56

1 answer

1

The height of .container-svg needs to be 100%, I put display: block in img just to guarantee. Check the fiddle:

link

    
03.03.2015 / 06:56
How to put border-radius on an iframe maps? Difficulty with repeater using asp.net webforms