Interviewer asked how to achieve a fixed aspect ratio in CSS

You may not have had any relevant needs for this question yet, or have not been asked this question in an interview, but I believe you will have the need eventually.

This question is a commonplace, and I bring it up again today in the hope that one day when you are asked this question, you will be able to give a beautiful answer.

If one day you are asked: "Can you tell me how to implement an element with a fixed aspect ratio?"

When you hear this, you must not give the answer blindly. Because if you ask this question, the question is not clear. So you can help the interviewer supplement the questions or ask questions to confirm the requirements. You can answer as follows:

If the size of the element is known, there is nothing much to say, just calculate the width and height and write it down.

If the size of the element is known, there is nothing much to say, just calculate the width and height and write it down. If the element size is unknown, the easiest way is to use JavaScript. If you use CSS, it can be divided into the following categories:

• If it is a replaced element <img> or <video>, how to implement it?
• If it is a common element, how should it be implemented?

Today, Waima will take a look at the above situations with you.

First, the element size is known, so this is passed. Needless to say, I'm afraid you'll beat me if I tell you.

We focus on the case where the element size is unknown .

So this article is mainly divided into how to achieve a fixed aspect ratio for replaceable elements and ordinary elements.

1. Replaceable elements to achieve fixed aspect ratio

Replaced elements (such as <img> and <video> ) are different from other elements in that they have a concept of pixel width and height. So if you want to achieve a fixed aspect ratio for this type of element, it is relatively simple.

We can specify the width or height value and the other side will calculate it automatically .

As follows, we fix the width of the image element and make the height adaptive:

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.img-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}

img {
width: 100%;
height: auto;
}

The effect is shown in the figure below. It can be seen that as the visible area continues to expand, the image will also expand while retaining the original proportions.

You may not have noticed that we set height: auto; on img element. This is to prevent developers or content management systems from adding a height attribute to the image in the HTML source code. This way it can be overwritten to avoid bugs.

In addition, the video element is similar. You can try it and the effect is as follows.

2. Common elements achieve fixed aspect ratio

Although we have achieved a fixed aspect ratio for the replaced elements above, this ratio is mainly because the replaced elements themselves have sizes, and this ratio is also limited by the original size ratio. Obviously, this is not flexible, so how do we achieve a fixed aspect ratio for normal elements?

First, let’s take a look at the most classic padding-bottom/padding-top hack method.

2.1 padding-bottom realizes fixed aspect ratio of common elements

In the previous companion chapter "Mastering CSS", Chapter 3, Visible Formatting Model, we mentioned that when vertical inner and outer margins are used as percentages, they are calculated based on the width of the containing block.

The following takes padding-bottom as an example

By using padding-bottom we can realize an element with a fixed width-to-height ratio, taking div as an example.

HTML:

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>

CSS:

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

The effect is as follows:

As shown in the above code, we set the height of div element 0 , and use padding-bottom to expand the height of the box to achieve a fixed aspect ratio of 4/3 .

This achieves a fixed aspect ratio, but it只是一個徒有其表的空盒子，里面沒有內容。如果想在里面放入內容，我們還需要將use absolute positioning to fill the fixed-size container element with the content inside the div.

as follows:

.intrinsic-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

In this way we can implement a fixed-size container that can be filled with content.

In addition, we can also calculate the size ratio through calc() , which is more flexible. We can quickly write any ratio, such as padding-bottom: calc(33 / 17 * 100%); .

I don't know if you have noticed that the above method can only make the height move with the width, but cannot make the width move with the height.

Is there any way to make the width move with the height? The answer is no, at least not now. But there will be in the future . Next, let’s take a look at another simpler and more convenient way.

2.2 aspect-ratio attribute specifies the aspect ratio of an element

Since the need for a fixed aspect ratio has existed for a long time, hacking with padding-bottom is not intuitive and requires nesting of elements.

In order to avoid this problem, the W3C CSS working group is already working on implementing such a property aspect-ratio . The plan has been proposed, but no browser has implemented it yet. It is still in the design stage and there is no published working group draft yet, only an editor's draft.

But this does not prevent us from getting to know this new technology in advance.

Let’s take a look at how convenient it is.

The syntax format of aspect-ratio is as follows: aspect-ratio: <widtu-ratio>/<height-ratio> .

As shown below, we can set width or height to auto and then specify aspect-ratio . The other value will automatically change in proportion.

/* Altitude follow-up */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/*Width follow-up*/
.box2 {
height: 100%;
width: auto;
aspect-ratio: 16/9;
}

This technique is very flexible in achieving a fixed aspect ratio for an element, and either width or height can be specified. It’s just that there is no browser implementation yet, so let’s look forward to it together.

Conclusion

This article summarizes how to achieve a fixed aspect ratio for elements. If you are asked this question during an interview. You can answer like this.

If the size of the element is known, there is nothing much to say, just calculate the width and height and write it down.

If the element size is unknown, the easiest way is to use JavaScript. If you use CSS, there are several ways:

• If it is a replaced element <img> or <video> , you can set one of width / height and set the other to auto , and the replaced element will change according to its intrinsic size.
• If it is a normal element, we can simulate a fixed aspect ratio by using padding-top / padding-bottom , but this method is not flexible and can only change the height with the width. The CSS working group is now introducing a new solution aspect-ratio , which can easily specify the aspect ratio, but no browser has implemented it yet. I believe that browsers will gradually implement this feature in the near future.

If your answer is like this in the end, then you have not only improved the teacher's question setting, provided solutions to various situations, but also pointed out the new solution that is being formulated in the standard. This kind of answer not only demonstrates your rigorous consideration of the problem, but also shows that you are always paying attention to the formulation of standards, which are big plus points. In this case, I can only say that you have secured a spot in this interview.

Reference Links

Aspect Ratio Boxes

Designing An Aspect Ratio Unit For CSS

CSS Box Sizing Module Level 4

This is the end of this article about the interviewer’s question about how to achieve a fixed aspect ratio in CSS. For more relevant CSS fixed aspect ratio content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!