0

I have an horizontal rectangle div container (parent) enter image description here

with another smaller one inside (child).

enter image description here

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 !

isherwood
  • 58,414
  • 16
  • 114
  • 157
Let_IT_roll
  • 389
  • 2
  • 6
  • 20

1 Answers1

0

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.

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I think this is wrong. The height should be dynamic. Not in your case. – Roko C. Buljan May 06 '15 at 17:51
  • The question is about the circle, not the parent. It accommodates any parent height. – isherwood May 06 '15 at 17:52
  • IF the height is not dynamic (which I don't thik is the case) than the demo is quite fine. I'd just add a `vertical-align` to the inner one, in order to keep the outer DIV's text at the top: http://jsfiddle.net/dn8ek8pr/2/ – Roko C. Buljan May 06 '15 at 17:57