css3 - How can I make a flexbox constrain image height? -
css flexbox newbie here.
i'm trying achieve layout with
- a fixed-height header
- a content area takes available space, , displays image.
- a fixed-height footer
i got working following flexbox code:
<html style="height: 100%;"> <body style="height: 100%;"> <div style="display: flex; flex-direction: column; height: 100%;"> <div style="background-color: rgba(255, 0, 0, .1)";> header </div> <div style="flex: 1; background-color: gray;"> content </div> <div style="background-color: rgba(0, 0, 255, .1)"> footer </div> </div> </body> </html>this works great. want display image inside of content area. small images, works fine:
<!-- inside content div... --> <img src="..." /> 
however, large images, the image overflows container :-(
(notice how pony extending past content area, overlapping footer, , beyond.)
i've tried setting max-height: 100% on img, still overflows container. how can fix this?
<html style="height: 100%;"> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body style="height: 100%;"> <div style="display: flex; flex-direction: column; height: 100%;"> <div style="background-color: rgba(255, 0, 0, .1)";> header </div> <div style="flex: 1; background-color: gray;"> content <img src="dog.svg" id="imge" /> </div> <div style="background-color: rgba(0, 0, 255, .1)"> footer </div> </div> </body> </html> #imge{ position:absolute; width: 99%; margin-left: -3%; height: 96%; } - using svg images not hamper quality of picture , when decrease or increase size of image, code works fine responsive layout.