CSS masters please...

Out of context: Reply #23

  • Started
  • Last post
  • 27 Responses
  • mekk1

    parent div
    position: relative;

    div with matching width/height:
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;

    I assume you want the circle to be a circle, not an egg when it expands with text. You will need to hack your way into keeping an aspect ratio of the parent div, which is described here: https://stackoverflow.com/questi…

    • ooh, that's neat - from your StackOverflow link: "width: 20vw; height: 20vw;" maintains aspect ratio.Nairn
    • Remember vw is based on viewport, which you said you didn't wantnb
    • *theynb
    • ^ yes, 100x100 px would also maintain aspect ratio, but it is not relative to the parent width. If you want your square to be responsive, you have to hack itmekk

View thread