CSS Width equal to the height, not vice versa

Question

for my web project is importent, that the width of my div was equal to hight, not vice versa, becouse height is relative and set to 80%. Something like:

.key{
    position: relative;
    display: inline-block;
    height: 80%;
    width: *height*;
    border: none;
    cursor: pointer;
}

Thank's for help.

Please use **aspected ratio** in css https://www.w3schools.com/howto/howto_css_aspect_ratio.asp — Rayees AC, Aug 09 '20 at 17:47

score 0 · Accepted Answer · answered Aug 09 '20 at 17:38

There is a way using CSS!

If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:

.key {
position: relative;
display: inline-block;
border: none;
cursor: pointer;
padding-bottom: 20%;
}

CSS Width equal to the height, not vice versa

1 Answers1