Menu
I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.
I have a div that contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the div shrink to match the image dimensions. I've reduced the problem to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Layout experiments</title> <style type="text/css"> #lightbox { margin: 0; padding: 0; position : fixed; left : 50%; margin-left : -320px; top : 100px; border-radius: 22px; background : #e0e0f0; color : #102020; } #lightbox img { border-radius: 15px; } .imagebg { margin : 7px; background : black; border-radius: 15px; height : 100%; } </style> </head> <body> <div id="lightbox"> <div class="imagebg"> <img src="picture.jpg"> </div> </div> </body> </html> 'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.
I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.
692
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. using container-div in html will make the website look more professional and attractive and therefore more people will want to explore your page.
The max-width property defines the maximum width of an element. If the content is larger than the maximum width, it will automatically change the height of the element.
Trying adding:
img { display: block; } to your CSS. Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
Source: https://developer.mozilla.org/en/CSS/line-height
139
Your image is using the line-height of its parent. Try this:
.imagebg { line-height: 0 } 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
