- Last post
- 24 Responses
I need to create a circle div the same heigh as the parent div with a matching width. The parent div will expand with text, not browser size.
Is this possible with CSS?
A circle is easy -- border-radius: 50%;
Set the width of the child element the same as the parent and the height of the child to 100%. Not sure about how the text fits in exactly. Do you have a mockup?
div with matching width/height:
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
- ^ 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
This was my solution.
- jQuery just for this? No nonb
- better solution?dbloc
- jQuery is already being loaded for other stuff if you're saying it should be vanilla JS.dbloc
- Maybe. Question: You don't need the circle to have text within it?nb
- It's just a graphic? I'd use a tiny SVG and let it scale up.nb
- The circle will actually have an image rotation in itdbloc
- Ah, ok. Have you considered CSS Masks?nb
- But really a bit of JS ain't gonna hurtnb
- yeah I think this worked out best. Thanks!dbloc