“This is the 29th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

Hello, everyone, I am quick frozen fish 🐟, a river front 💦, like the colorful 💐, continuous sand sculpture 🌲, is the good brother of the cold grass of the next door. Welcome to add my wechat: Sudongyuer pull you into the group, discuss together, look forward to growing with you 🥂 ~

Read this article 🦀

1. You will learn how to keep element adaptive aspect ratio

2. What will you learnaspect-ratio

3. How to use itaspect-ratioIt is convenient to maintain adaptive aspect ratios for elements

Preface 🌵

We all know that in front-end development, we often encounter the need to maintain an aspect ratio of an element, the most common is our Img element, but in addition to Img, Vidoe and other elements have the aspect ratio characteristics, how to maintain the aspect ratio of other elements, which brings a lot of inconvenience to our development. Today we will teach you how to use the aspect-ratio property to solve real problems

The text 🦁

Infamous padding-top Hack💚

If you’ve ever encountered a classic interview question that requires you to write a DIV element that maintains a aspect ratio, you need to use a padding-top Hack.

What is a padding-top Hack? Have you ever encountered a requirement that a non-replaceable element always maintain its aspect ratio? And how? A padding-top Hack is the most common solution.

Use padding to maintain the aspect ratio of elements

* {padding: 0;
            margin: 0;
        }
      .aspect-ratio-hack {
        position: relative;
        height: 0;
        padding-top: 56.25%;
      }

      .inner {
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
Copy the code

What would you do if you were in my shoes

What is theaspect-ratio🌽

Aspect-ratio is a specification for maintaining aspect ratios, which was proposed by the W3C long ago, but was poorly supported by major browsers in the early days. Now, major browsers have well supported this CSS native property, and it appears to solve the problems we encounter in maintaining aspect ratios

W3C

The major browsers already support it perfectly

Browsers voted 89 percent

How to useaspect-ratio 🍪

Take the padding-top Hack example above and see how useful it is

Just add this line of code hahahahahahaha great 😂

 .inner {
        background-color: pink;
        color: red;
        font-size: 30px;
        width: 50%;
        text-align: center;
        aspect-ratio: auto 2 / 1; // Just add this line}Copy the code

aspect-ratio🐳

Grammar: aspect – thewire: auto | |

  • auto:The default, which specifies that the element has no preferred aspect ratio and should resize itself as usual. Therefore, replacement elements, such as images with inherent aspect ratios, are usedtheAspect ratio.
  • <ratio>:The forward slash (/) delimited two positive values, with or without Spaces around them, targeting the width and height of the element. In the case of a single value, the second value is considered to be 1. Size calculations involving the preferred aspect ratio apply to the dimensions of the specified boxbox-sizing.
  • initial:Apply the default Settings of the property, namelyauto.
  • inherit:usingaspect-ratioParent value.
  • Unset: Removes the current aspect ratio from the element.

Let’s go straight to the example

html

<div class="preferably-square"></div>
<img class="preferably-square" src="https://source.unsplash.com/random/800x600?iran" alt="">
Copy the code

css

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.preferably-square {
  width: 300px;
  aspect-ratio: auto 2 / 1; 
}

div {
  background-image: linear-gradient(90deg.#ec4899.#ef4444.#f59e0b);
}

img{}Copy the code

The auto attribute applies to replaceable elements (img, video, etc., which have their own aspect ratio)

With the auto attribute, the replaceable element will retain its original aspect ratio, regardless of your CSS attributes.

As you can see, the div is pulled up in 2/1 aspect ratio, keeping the original aspect ratio with the image

It is better to teach a man to fish than to give a man to fish. I will post the address of Codepen and let you try it yourself

Codepen: codepen. IO/seyedi/pen /…

References 📚

  • W3C

  • csswg

  • MDN

Conclusion 🍁

In this article, we learned what aspic-ratio is and how to use it so that you don’t have to worry about maintaining the aspect ratio of elements. We also learned how to solve the aspect ratio problem in the past. We also learned about its application scenarios and simple explanations. It is better to teach a man to fish than to teach a man to fish, the address is in this Codepen, have not used the little partner hurry to try, improve their development rate, marry bai Fumei as soon as possible, ha ha ha 😂

Conclusion 🌞

Every front end then I should know a CSS skills, 89% of all browsers support it 🐣 ended, actually very simple, the purpose of the article is the summary of daily work and output, output some feel useful to everybody, cuisine is not is not important, but love 🔥, hope everyone can like my articles, I am really very attentively in writing, Also hope to know more like-minded friends through this article, if you also like to toss, welcome to add my friend, sand sculpture, progress together.

Making 🤖 : sudongyu

Personal blog 👨💻: Frozen fish blog

Vx 👦 : sudongyuer

Write in the last

Guys, if you like my words, give 🐟🐟 a thumbs up 👍 or follow ➕ to support me the most.

Add me on wechat: Sudongyuer, invite you into the group and learning the front together, become a better engineer ~ (group of qr code here – > front to go to bed early, qr code has expired, see the links to the boiling point in the comments, I will put the latest qr code in the comments section, of course, can also add me WeChat I pull you into the group, after all, I also am interesting front end, I also not bad 🌟 ~