Suppose I want to place a div inside another div, but the child div must have the same height as the parent div and its width must equal its height. However, I can’t use absolute values for the height/width because the container’s (parent’s) dimensions aren’t absolute values.
Essentially something that looks sort of like this:
|----------------------------------------------------------|
| | |
| child | |
| div | parent div |
| | |
|----------------------------------------------------------|
I don’t know how to make the child’s width equal its height. It’s simple to set height: 100% on the child, but I’ve got no clue as to how I can set its width relatively.
>Solution :
If you can use modern CSS, you can use
height: 100%;
aspect-ratio: 1;
on your child to force it into being a square.
(aspect-ratio is supported by 80% of users and all major browsers)