Div HEIGHT same as width to make a circle

Question

I have an horizontal rectangle div container ( parent )

with another smaller one inside ( child ).

I want to make the smaller one ( child ) look like a circle and the height should always be the same as the parent div for all resolutions.

I found a lot of solutions showing how to make a 1:1 proportional div (for instance, this example! ) but all of them were based on the width of the div and not the height . This means that i need to know the width to apply the solutions but in my case, i can't do that , since I know the height (100% of the height of the parent) but I don't know the width.

Ive tried to adapt the solution but I was not successful.

Any idea how i can make a 1:1 div knowing the height of the div ?

Thanks !

Answer 1

One slick trick is to use a 1:1 image as a spreader:

.outer {
    overflow: hidden;
}
.inner {
    border-radius: 50%;
    height: 100%;
    display: inline-block;
}
.inner img {
    max-height: 100%;
    opacity: 0;
}

<div class="outer">
    <div class="inner">
        <img src="http://placehold.it/500x500" alt="" />
    </div>
</div>

You could use a plain-color image with a tiny file size, or an SVG image. More on that .

Demo

If you need content to overlay the circle, try this .

Answer 2

You can use this class to make circle of almost all in general:

.circle {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
}