Geek Answers Handbook

The maximum maximum height value of 100% does not work in firefox

I'm currently trying to resize the image depending on the size of the browser. I managed to resize the image horizontally, if I make the browser window narrow, the image will be proportionally resized proportionally. However, when I resize the window vertically, Firefox simply does not want to do this! The code is pretty simple

<body> <div id="content"> <img src="images/abc.jpg"> </div> </body>

and CSS:

 #content { height: 100%; padding: 50px; } #content img{ max-height:100%; max-width: 100%; }

Another problem is that the image seems to resize vertically in chrome, but I need to drag the bottom of the browser over the image before it starts to do this. I would prefer the image to start to rubberize as soon as the bottom content fills the "bumps" on the bottom of the image, so to speak. Hope this makes sense.

Any help is much appreciated

+7
source share
4 answers

try this taken from twitter boot tray 2

 html,body{height:100%;} #content {padding: 5%;} #content img { max-height: 100%;/* Part 1: Set a maxium relative to the parent */ width: auto\9; /* IE7-8 need help adjusting responsive images */ max-width: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }
+2
source

Since the height could potentially go on forever, you cannot set the height of anything relative to the browser window as a function of percentage. I am saying that you will need to put it inside something with a fixed height in order to use the percentage value. Good luck

-b

+1
source

You specified only the properties "max-height" and "max-width". If you do not specify the actual properties “width” or “height”, the original image will take the width and height of its physical dimensions (if not more than the specified maximum height and maximum width).

Said the behavior you noticed is correct. The answer, as already mentioned, also indicates the initial property of the width or height, depending on which image is a portrait or landscape.

0
source

Is that what you want?

I just added the height in html and body, so the height of #contents does not reach the maximum.

 body, html { height: 100%; margin: 0; padding: 0; }

(And window size: border-box for #content, because it seems like you want it)

0
source

More articles:


All Articles