how to fit large image in small div

Question

I have an image of 1920*1300 ratio which I want to be displayed in which ever device the website is running and I want the image to cover whole div.

Here's my code:

.carousel {
  width: 100vw;
  height: 80vh;
  position: relative;
}

.carousel a {
  width: 100%;
  height: 100%;
}

.carousel img {
  width: 100%;
  height: 100%;
  /* Image does not render proper*/
  object-fit: cover;
  /* Image gets streched */
  object-fit: fill;
  /* Does not fill the whole carousel */
  object-fit: contain;
}

<section class="carousel">
  <a href="\calculator">
    <img class="slide" src="https://via.placeholder.com/1930x1300" /></a>
</section>

Answer 1

TL;DR

Make sure you set both aspect-ratios of the container and the image to the same number

---

It will never(*) be a 100% perfect match, because of the aspect-ratio. You can set either of the sides to match 100% and the other can be auto which will be relative to the other (maintaining the aspect-ratio) so it will scale without distortion with the parent container.

If you set both to exactly 100% then one part (either width or height) will be smaller than the container. If you don't care about the aspect-ratio you can stretch it.

---

(*) It will only work like you intended iff the container has the same aspect-ratio as your image.

In your case, the window is 100vw / 80vh which results in a 5/4 ratio (1.25). The image however is: ~ 31/21 (~ 1.4769).

Therefore, if you apply the container-ratio to your image: 1920 x (1300 * 1.1815) you get 1920 x 1536 => 1920 / 1536 = 1.25. Now if you do:

.carousel a {
  display: block;
}

.carousel img {
  width: 100%;
}

It should exactly fit while maintaining the aspect-ratio. Even when the image is bigger or smaller in size (e.g. 480 x 384, 960 x 768, 1920 x 1300 etc.). But this is a special case (see 2nd snippet).

If all your images are in this 1920 x 1300 format for example, then you could just adjust the height of the container instead (which is the other way around so to say).

.carousel {
  width: 100vw;
  /* 100 / (1920 / 1300) */
  height: 67.70vh
}

First, general example (container-aspect-raito: 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, specific example (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>