Menu
I have a question about the image resizing in CSS.
I have a 1920x1080 image.
This image should be automatically resized to fit on any screen, however I am unable to do this.
Example of what I want here
At the top, a video start to play, that's how I want you to be my page, but instead of a video, the picture.
My HTML:
<body>
<div id="slides">
<ul>
<li><img src="_img/img1.jpg"></li>
<li><img src="_img/img2.jpg"></li>
<li><img src="_img/img3.jpg"></li>
<li><img src="_img/img4.jpg"></li>
</ul>
</div>
All the images inside the div called slides should fit in any screen.
672
First of all you should insert meta viewport on your head, like this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
then here is a snippet of how you could make this work.
body {
margin: 0;
padding: 0
}
ul,
li {
list-style: none;
margin: 0;
padding: 0
}
#slides img {
max-width: 100%;
display: block /*fix inline image small gap*/
}
/*larger devices than the size of image */
@media (min-width: 1920px) {
#slides img {
width: 100%
}
}<div id="slides">
<ul>
<li>
<img src="http://lorempixel.com/1920/1080">
</li>
<li>
<img src="http://lorempixel.com/1920/1080">
</li>
<li>
<img src="http://lorempixel.com/1920/1080">
</li>
<li>
<img src="http://lorempixel.com/1920/1080">
</li>
</ul>
</div>You should add to your CSS:
#slides img {
width: 100%;
height: auto;
}
This make the images fit the width of the container and keeping the aspect ratio.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
