Responsive Images

responsive-images.css

.myImg {
    object-fit: cover; /* also works for videos. Can also use contain*/
    width: 320px;
    height: 180px;
}

/* The Netflix Way */
/*
this one works everywhere and it is my favorite! You’ll need to wrap your image with a relative padded parent.

We will keep the image ratio with a percentage on the padding property. Your image will be a full size absolute child.

The code looks like this:
*/
.wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

/* The Performance way (Advanced) */
/*
in modern browsers you can change an image source depending on your page width? That’s what srcset is made for!
You can combine them with the HTML 5 <picture> tag, which gracefully degrades with an <img>.
*/
<picture>
    <source media="(max-width: 799px)" srcset="elva-480w.jpg">
    <source media="(min-width: 800px)" srcset="elva-800w.jpg">
    <img src="elva-800w.jpg">
</picture>

/* HELPFUL NOTES */
/*
1. background-image if your image is not part of the page’s content.
2. Use object-fit if you don’t care about IE.
3. The padded container technique, used by Netflix, works everywhere.
4. In most cases, just add height: auto; in your CSS.
5. If you need fast load times, use srcset to load smaller images on mobile.
*/