I'm having a problem making an image fill 100% of the width of the page; Here I show you the HTML code:
<body>
<div id="slider">
<div id="contenedor">
<img src="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg">
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
<img src="C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg">
<img src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg">
</div>
</div>
</body>
Here the CSS:
body{
margin: 0;
padding: 0;
}
#contenedor{
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#contenedor img{
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
#slider{
width: 100%;
height: 100%;
position: absolute;
}
But it happens that it doesn't occupy the whole width of the page, if not that it occupies about 75%, it only does it when I change its position to "absolute" , but they are in a flex and are placed one on top of the other. I haven't tried anything in js because I guess it can be fixed perfectly in css.
In the previous image, you can see how the first image occupies 75% and the next one appears: what I am looking for is that it occupies that space outlined in red.
The problem you have is that you are giving each image 100% of the width of the screen. What you need to do is reduce the container size of each image. Also for device issues, I recommend you use
vw
andvh
for best results. (the latter are a percentage of the width or height of the device)Also, to make your images look better, use
object-fit
, to display them as you like.EXAMPLE
I found a solution, I don't know how it works, but it does, I put each image in a div, that way I gave each div the size I wanted and made each image cover its entire container, I don't quite understand the behavior of the pictures but I'll try to figure it out.