css image doesn't fill div

Question

I have a DIV that is 100% width..... inside a grid system .. the total grid is 1140px..

anyway inside the div that is 100% i inserted a image...

problem is if the div background is black... there is like 1cm at the bottom that still shows the black color.

like this

<div style="background:black; width:100%;">
  <img src="http://i42.tinypic.com/ofq9tg.png" >

should i be using a float on the image? or using a display:block?

The 1cm gap is because <img> is display: inline by default. Switching to display: block will remove it. — Thibaud Colas
– Thibaud Colas, Commented Dec 8, 2013 at 2:47

San · Accepted Answer · 2013-12-08 02:45:31Z

13

img {
    height: auto; /* Make sure images are scaled correctly. */
width: 100%; /* Adhere to container width. */
display:block;
 }

answered Dec 8, 2013 at 2:45

San

1,2472 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Atul Gupta · Accepted Answer · 2013-12-08 02:49:54Z

9

add display: block; to style of image.

answered Dec 8, 2013 at 2:49

Atul Gupta

7551 gold badge7 silver badges20 bronze badges

i just said the required part, setting height auto is not required as its default

indeed, but your answer definitely came second, and San's answer is more than enough.

it is not important who's came first or second...as long as it helps someone....cheers people :)

Cat Boxer · Accepted Answer · 2022-03-18 00:00:29Z

0

or you can add if you need to keep it inline. line-height: 0; to the image style.

answered Mar 18, 2022 at 0:00

Cat Boxer

477 bronze badges