Image not covering the whole "div" area

Question

I've been looking online for a viable solution to my problem but could not find a clear answer, so I am posting it here.

The problem is that I want to have the image cover the entire , but there seems to be some left over space below the image and I can't seem to be able to fill it up. I'm taking about the blue space in the as shown in this image:

I'm not looking for a workaround the solution. I just want a definitive solution that corrects the problem

The thing is, there are a number of good definitive solutions, depending on the context and use of the image div. What's the reason you set an absolute pixel size for the image? — Bman70, Jun 02 '19 at 06:17

score 2 · Accepted Answer · answered Jun 02 '19 at 06:08

Just add a display: block or vertical-align: top to your img tag.

img {
 width: 100%;
 height: auto;
  display: block;
}

.cover {
 background-color: blue;
}

<div class="cover">
 <img src="//unsplash.it/460/345" width="460" height="345" alt="">
</div>

score 0 · Answer 2 · answered Jun 02 '19 at 06:10

0

Try changing

img {
width: 100vw;
height: 100vh;
display:block
}

It is good if you can post a jsfiddle. so then we can looking into your actual code.

answered Jun 02 '19 at 06:10

Argon

791
1
9
27

He doesn't want the image to take up the whole document, just the .cover div. – Ali Mousavi Jun 02 '19 at 06:15
Oh. I see. I was thinking about the entire screen. – Argon Jun 02 '19 at 06:17

score 0 · Answer 3 · answered Jun 02 '19 at 06:13

What I usually do for images is first determine if the image is landscape or portrait (i.e. if the image is wider than it is tall or vice-versa). Then I set the image's height or width to 100% depending on the orientation. And then overflow: hidden on the parent container so that the result is an image that has preserved the aspect ratio and covers the container.

Image not covering the whole "div" area

3 Answers3