Two css technique to make image responsive.

Image is a basic content of a website. Unlike text, browser don't wrap image inside it's container or element. If an image size is wider than it's parent container, it will overflow from it's container and can cause issue like vertical scrollbar. I remember back then when I was learning css I hated it so much when I saw vertical scrollbar appeared on my screen.

So today I will show you two bulletproof technique to make image responsive and prevent overflow from it's container.

1. Using css property "max-inline-size"

"max-inline-size" render itself inside it's container and prevent overflow.

Example:

 <div class="img-container">
     <img src="#" />
 </div>

.img-container {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

img {
    max-inline-size: 100%;
    block-size: auto;
}

Here property "block-size: auto" used to maintaining the image aspect ratio. If you want to change the aspect ratio of an image you can use css property "aspect-ratio". If the image rendered stretched you can use object-fit.

img {
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: "2/1";
    object-fit: cover;
}

2. The Netflix way!

You can use padding technique to maintain image aspect ratio. Netflix use this technique. It's work on every old browser including IE :3 .

Example:

<div class="img-container">
    <div class="wrapper">
        <img src="http://placehold.jp/1920x1080.png" />
    </div>
</div>

.img-container {
    width: 200px;
    height: 0;
}

.wrapper {
    position: relative;
    padding-top: 56.25%;
}

img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Core Concept

Do you know what's the logic behind this?
Let's see we defined our parent element width 200px and height 0. Look at the image source. The original width and height of this image is 1920x1080. The aspect ratio of this image is 16:9. So we want to fit this image to our parent div with img-container class and as well as we want to maintain the aspect ratio of this image. How we will do that?
The aspect ratio is 16:9 (width:height). If we divide height from width 9/16 we will get 0.5625 = 56.25%. Now if we put that value in padding top it will work as image height! Do you get the idea?

Still not?
Let's try another example with 1:1 aspect ratio. If we have an image about 500x500 size which aspect ratio is 1:1. So if we define width: 500px in parent element. The padding-top will be 1/1 = 1 = 100%. 100% padding-top of parent element width will be 500px! Which is height of our image. So 500x500 a perfect square and we can maintain this image aspect ratio.

Remember padding-top calculated from parent width.

That's it. This is my first ever blog post. So please forgive, if I make any mistake. If you don't understand something let me know in the comment section.

💻👻 Thanks For Reading.