Menu
If I set the img's size to 100*100, the containing div will be like 100*106.
Where does that extra '6px' come from? How does this behavior fit to the standard?
427
The reason behind your issue is that you did not specify the width of the container but, in the same time, you set a width: 100%; for the image.
You can use 2 properties, clientHeight and offsetHeight to get the height of the div. clientHeight includes padding of the div. offsetHeight includes padding, scrollBar, and borders of the div.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
@clyde; yes this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.
you can remove it with css:
img { display:block; } or img { vertical-align:bottom; } FOR MORE CHECK THESE
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Unwanted padding-bottom of a div
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
