Responsive Images
A CSS styling to achieve a pixel-perfect responsive implementation is very important for any kind of web application development.
Aspect ratio plays a significant role in implementing a responsive image which doesn't affect the quality of the image. This implementation can be easily achieved using the following code.
HTML
<div class=”container”>
<! — Image start →
<div class=”image-wrapper”>
<img src=”https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg" alt=”” />
</div>
<! — Image end →
</div>
CSS
.container {
max-width: 500px;
}
.image-wrapper {
position: relative;
padding-bottom: 56.2%;
}
.image-wrapper img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
Padding-bottom does the magic here. so for a 16:9 … 9%16 = 56.2 percent
Get readizo com’s stories in your inbox
Join Medium for free to get updates from this writer.
Similarly if you want to implement for a different aspect ratio we need to follow same method for giving the padding value. for example: 4:3 … 3%4 = 75 percent
Property object-fit is not IE compatible following pollyfill can be utilized to fix the issue.
https://github.com/jonathantneal/fitie
Mostly commonly used aspect ratios for images are below
HD Video 16:9
Standard Monitor 4:3
Classic Film 3:2
Cinemascope 21:9
