Summary:
Ensure that both the aspect ratios of the container and the image are set to the same value.
It may never be a perfect match at 100% due to differences in aspect ratio. You can set one side to 100% and the other to auto, which will maintain the aspect ratio relative to the container for scaling without distortion.
If you set both sides to exactly 100%, one dimension (either width or height) will be smaller than the container. If you're not concerned about the aspect ratio, you can stretch it.
Note: This method only works if the container and the image share the same aspect ratio.
In this scenario, the window has an aspect ratio of 100vw / 80vh, resulting in a ratio of 5/4 (1.25). However, the image has an aspect ratio of ~31/21 (~1.4769).
To fit the image perfectly with the container's ratio, use the formula: 1920 x (1300 * 1.1815), resulting in
1920 x 1536 => 1920 / 1536 = 1.25
. Applying this CSS should maintain the aspect ratio even with varying image sizes.
If your images are consistently in the 1920 x 1300 format, adjusting the height of the container could be a viable solution as well.
First example: featuring general aspects (container-aspect-ratio: 5/4, image-aspect-ratio: ~31/21)
body {
margin: 0;
padding: 0;
}
.carousel {
width: 100vw;
height: 80vh;
position: relative;
}
.carousel a {
display: block;
height: auto;
}
.carousel img {
width: 100%;
height: 100%;
}
<section class="carousel">
<a href="\calculator">
<img class="slide" src="https://via.placeholder.com/1920x1300" /></a>
</section>
Second example: showcasing specific elements (container-aspect-ratio: 5/4, image-aspect-ratio: 5/4)
body {
margin: 0;
padding: 0;
}
.carousel {
/* same ratio as 5/4 i.e. 100%/80% */
width: 480px;
/* ... */
height: 384px;
border: 1px dashed black;
position: relative;
}
.carousel a {
display: block;
}
.carousel img {
width: 100%;
}
<section class="carousel">
<!-- I made the image smaller so that it is better to see in the snippet but you could also use 1920x1300 ofc. -->
<a href="\calculator"><img class="slide" src="https://via.placeholder.com/960x768" /></a>
</section>