Image not taking the entire width of its container

1

Dear campers,

I want an image to take up entire width of its container. I tried using:

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

but there is a small part of the container to the right which the img doesn’t cover. The image has dimensions of at least 1200 x 400 px. I wonder what is wrong. There is a pen Here.

2

Just do something like 102%. CSS does that sometime when you apply 100% to a child that is inside a parent component.

3

Hello!

The image on the pen is the same you’re trying to adjust?

4

Yes. It is the same image.

5

In that case, the image has a transparent space. Edit the image and remove that space :slight_smile: or set the background to the same color of the image:

image
image408×536 132 KB

1 Like
6

What could be the reason for the transparent space?

7

No idea LOL :laughing:!

It has something to do about how the picture was taken/saved/stored, so I can’t really tell :sweat_smile:.

8

I used opera to take snapshots of five different web pages but some are okay. I guess i just have to edit them. Thanks.

1 Like