Wonderland
  • README.md
  • Notebook
    • Crypto
      • Solana
        • Troubleshooting
          • BPF SDK path does not exist
    • Language
      • Rust
        • Reference
          • Capturing the Environment with Closures
          • Understanding &mut &mut Reference
      • C++
        • Reference
          • Code for MS rand() and srand() in VC++ 6.0
  • Textbook
    • Serials
      • A Real-Time Cryptocurrency Ticker Dashboard
        • 0 - Some Preparation
    • Frontend
      • A Simple Progress Bar
      • A React Ribbon Component
      • An Easy to Use React DnD Sortable Component
      • Sticky Header, Sticky Footer and Fluid Content
      • How To Set Same Height As Width In CSS
  • dictionary
    • Alphabet
      • MySQL
      • FFmpeg
    • Algorithm
      • Diary
        • 2022
          • 07
            • 2022-07-02
            • 2022-07-01
          • 06
            • 2022-06-30
            • 2022-06-29
            • 2022-06-28
            • 2022-06-27
            • 2022-06-26
            • 2022-06-25
            • 2022-06-24
            • 2022-06-23
            • 2022-06-22
            • 2022-06-21
            • 2022-06-20
            • 2022-06-19
            • 2022-06-18
            • 2022-06-17
            • 2022-06-16
            • 2022-06-15
            • 2022-06-14
            • 2022-06-13
            • 2022-06-12
            • 2022-06-11
            • 2022-06-10
            • 2022-06-09
            • 2022-06-08
            • 2022-06-07
            • 2022-06-06
            • 2022-06-05
            • 2022-06-04
            • 2022-06-03
            • 2022-06-02
            • 2022-06-01
          • 05
            • 2022-05-31
            • 2022-05-30
            • 2022-05-29
            • 2022-05-28
            • 2022-05-27
            • 2022-05-26
            • 2022-05-25
            • 2022-05-24
            • 2022-05-23
            • 2022-05-22
            • 2022-05-21
            • 2022-05-20
            • 2022-05-19
            • 2022-05-18
            • 2022-05-17
            • 2022-05-16
            • 2022-05-15
    • Troubleshooting
      • A Weird Python Command Not Found Problem
Powered by GitBook
On this page
  • What I wanna build?
  • Let's go straight to the code!
  • For the best compatibility
  • For modern browsers
  • Reference
  1. Textbook
  2. Frontend

How To Set Same Height As Width In CSS

I am pretty sure this is a frequently asked question from frontend beginners like me...

Last updated 3 years ago

What I wanna build?

HaHa~ Four Square Boxes Sit In A Row

I want to create square boxes, however, it really bothered me for a while.

Let's go straight to the code!

For the best compatibility

<div className="inline-block relative w-1/4">
  <div className="mt-[100%]"></div>
  <div className="absolute top-0 bottom-0 left-0 right-0 border-2"></div>
</div>

The key to success is a magic mt-[100%]. It works because when using margin/padding-top/bottom with percentage, the value is determined according to the width of the containing element which is w-1/4 for width: 25% in my code. Essentially, we have a situation where "vertical" properties can be sized with respect to a "horizontal" property. This isn't an exploit or a hack, because this is how the CSS specification is defined.

For modern browsers

<div className="relative w-1/4 aspect-[1] border-2"></div>

Yes! You can actually solve this century problem with a simple aspect-[1], which repesents aspect-radio: 1; in CSS.

Thanks to modern browsers, this solution is elegant and easy to understand, and here is the browser compatibility:

Reference

The following examples were created in React and based on , and the information on class names I used can be found .

The aspect-ratio property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Browser Compability Of aspect-ratio

and you can also check it on .

Tailwind CSS
here
CSS
Can I Use
Height equal to dynamic width (CSS fluid layout)
Maintain the aspect ratio of a div with CSS