Menu

Responsive images with aspect ratio without any media queries

In this article, we will learn how to create responsive images with aspect ratio without using any media queries.

Video tutorial

If you prefer video, I have a video tutorial for you. You can watch it below.

Codepen

I would suggest you to play with the codepen below to understand the concept better.

What is Image aspect ratio?

Image aspect ratio is the proportional relationship between the width and height of an image. It is commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, no matter how big or small the image is, if the width is divided into x units of equal length and the height is measured using this same length unit, the height will be measured to be y units. If you keep the aspect ratio of an image, it will not be distorted when resized.

How to create responsive images with aspect ratio?

1<div class="outer__container">
2    <div class="container">
3        <img
4            class="image"
5            src="https://wallpapercave.com/wp/wp2042899.jpg"
6            alt="Taylor swift image tutorial by Cules Coding"
7            srcset=""
8        />
9    </div>
10

11    <h1>Taylor Alison Swift</h1>
12</div>

We have an outer container and a container and an image inside the container.

1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6

7body {
8    min-height: 100vh;
9    display: grid;
10    place-items: center;
11}
12

13.outer__container {
14    width: 80%;
15    padding: 0 20px;
16}
17

18.container {
19    width: 100%;
20    position: relative;
21    padding-top: 56.25%; // 16:9 aspect ratio
22}
23

24.image {
25    position: absolute;
26    top: 0;
27    bottom: 0;
28    left: 0;
29    right: 0;
30    width: 100%;
31    height: 100%;
32    object-fit: cover;
33}
34

35h1 {
36    font-size: 3rem;
37    font-family: monospace;
38    text-align: center;
39}

Explanation:

  1. We have added a width to the outer container
  2. The container will be positioned relative and the image will be positioned absolute.
  3. Image will be 100% width and 100% height of the container.
  4. The idea is to keep the aspect ratio of the container and the image will take the height and width of the container.
  5. We add the aspect ratio to the container using padding-top. We have used 56.25% which is the aspect ratio of 16:9. You can calculate the aspect ratio using the formula (height/width) 100. For instance, to keep the image square you will use 100%. `( 1000px/1000px ) 100` Now if you resize the image it will keep the aspect ratio and will not be distorted.

Css aspect ratio property

You can use css aspect-ratio property to keep the aspect ratio of the image. It is a new property and is not supported in all browsers. You can use it like this:

1.image {
2    width: 100%;
3    aspect-ratio: 16/9;
4}

You don't have to use any positioning or padding to keep the aspect ratio of the image like the previous example.

This is how you can create responsive images with aspect ratio without using any media queries. If you have any questions, feel free to ask in the comments section below.

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Next PostHow to build a Tesla clone with vanilla html, css and javascript