Geek asks and answers

Invalid DIV image wrapper height with percentage widths

I want to wrap the image in html DIV, and since I want it to be fully scalable with the window size, I want to set the DIVpercentage width as follows:

HTML

<div id="wrapper">
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>

CSS

#wrapper {
    position: absolute;
    width: 50%;
}

#wrapper img {
    width: 100%;
}

The image should determine the height of its container. This is due to the fact that the image width is set to 100%, and the image height is calculated accordingly, maintaining the correct aspect ratio.

The result is displayed on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

My questions:

  • Why do all modern browsers display a DIV5px shell higher than the internal image?
  • 5px-, ​​ javascript?

, Chrome (21.0.1180.89), Firefox (15.0.1) IE8, IE7 , DIV .

+5
6

, , :

#wrapper img {
    display: block;
    width: 100%;
    border: 1px dashed red;

}

inline block line-height.

, , DIV - , line-height , .

: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

+1

................

vertical-align:top img tag throw css

#wrapper img {
    width: 100%;
    border: 1px dashed red;
    vertical-align:top; // add this line
}

+1

:

http://jsfiddle.net/5BN4g/29/

-: -)

:

#wrapper {
    width: 60%;
    background-color: #aaa;
    margin: 50px auto;
    line-height:0;
}

#wrapper img {
    width:100%;
    border: 1px dashed red;
    box-sizing:border-box;
}
​

, ,

+1

, shuold , img.

<div id="wrapper">
  <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>

DEMO

0

, ,

display

And now it looks fine check the link

Display Table Example

0
source

Your problem is that the image is a tag <img>, or rather, is an inline element. All you have to do is set display: blockto the image, and the extra indentation will disappear. Demo .

0
source

More articles:


All Articles