Kevin Powell - Community•16mo ago

why aspect-ratio needs a display to work?

Hi I want to use aspect-ratio to make a rectangle and then make it a circle; but the <a> is not responding to aspect-ratio in my code here until I put a

display:grid / inline-block

display:grid / inline-block

. https://codepen.io/codedkk/pen/RwYxbKL Why? it is from Kevin's tutorial: https://scrimba.com/learn/spacetravel/the-explore-button-part-1-cof6e4b00a7a0928954d4bda3

codedkk

CodePen

aspect ratio for button

...

Scrimba

The Explore Button part 1

Learn to code with interactive screencasts. Our courses and tutorials will teach you React, Vue, Angular, JavaScript, HTML, CSS, and more. Scrimba is the fun and easy way to learn web development.

1 Reply

Å Marlon G•16mo ago

For aspect-ratio to work you need either width or height (otherwise how would the browser calculate the aspect ratio?). Since a is an inline element, and the width of it is ignored until you make it a block element, there is nothing to clacluate the aspect ratio from. So to be more precise: An inline element needs to be turned into a block for it to have a width, and from there on aspect ratio can be calculated. Try this code in your codepen:

.large-button {
    display:inline-block;
    font-size: 2rem;
    text-decoration: none;
    color: black;
    background-color: green;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;     
}

.large-button {
    display:inline-block;
    font-size: 2rem;
    text-decoration: none;
    color: black;
    background-color: green;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;     
}

Gaming

Programming

why aspect-ratio needs a display to work?