1

My idea is to get the child object (@example the ".moon") to have the equal values of height and width, and not exceed the width or the height of the parent (@example the ".sun").

So when the parent width is bigger than its height, the child's value for width and height is the smaller one, the parent height.

In the same way when the parent height is bigger than its width, the child's value for width and height is the smaller one, the parent width.

I mean inscribe an object inside the container but only using CSS.

The "padding-top" trick only works when the parent width is bigger than its height. And the "object-fit" only work for images I guess.

I did reference the circles, just to make it clear that the sides have to have the same value (height and width), also that the child can contain elements.

I know it can be perfectly done with JavaScript getting the parent height and width, comparing the smaller one and set it to the child height and width, I made it with jQuery, but wanna know if its possible to achieve it without jQuery or JavaScript, pure CSS.

Try the example and resizing the screen.

var pw = ""; var ph = ""; var cw = ""; var ch = "";

$( window ).resize(function() { 
  
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
});

function mySUNction() {
   
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
}
* {
  padding: 0;
  margin:0;
}
.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sun {
  position: relative;
  width: 33%;
  /*padding-top: 33%;*/
  height: 33%;
  background: yellow;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.moon {
  background: blue;  
  /*object-fit: fill;*/
  /*border-radius: 50%;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="sky">
<div class="sun">
<div class="moon"></div>
</div>
<div>
<button onclick="mySUNction()">Click me</button>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ChocoXXL
  • 68
  • 7
  • Does this answer your question? [How does this CSS produce a circle?](https://stackoverflow.com/questions/16189208/how-does-this-css-produce-a-circle) – imtheman Aug 13 '20 at 19:11

2 Answers2

2

If you only want the visual, it can be done with gradient:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33%;
  height: 33%;
  background: 
   radial-gradient(circle closest-side,blue 99%,transparent 100%)
   yellow;
}
<div class="sky">
  <div class="sun">
  </div>
</div>

The same logic you apply with a mask and you can use any background:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33%;
  height: 33%;
  background: 
   yellow;
}

.sun > div {
  width:100%;
  height:100%;
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
  -webkit-mask:radial-gradient(circle closest-side,blue 99%,transparent 100%);
          mask:radial-gradient(circle closest-side,blue 99%,transparent 100%);
}
<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

You can also consider the use of min()/max() like below

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33vw;
  height: 33vh;
  background: yellow;
  display: flex;
}

.sun > div {
  margin:auto;
  height:min(100%,33vw);
  width:min(100%,33vh);
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
}
<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

Also like below:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33vw;
  height: 33vh;
  background: yellow;
  display: flex;
}

.sun > div {
  margin:auto;
  display: flex;
  width:min(100%,33vh);
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
}
.sun > div::before {
  content:"";
  padding-top:100%;
}
<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

Related question if you want the circumscribed circle: Make a perfect circle around a div of variable height

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I think these are the best options, it makes the child perfectly inscribed in its parent and also handling the child as a container. The only thing is the Browser Compatibility for the max() min(), [link](https://developer.mozilla.org/en-US/docs/Web/CSS/min#Browser_compatibility), but I think it is. – ChocoXXL Aug 14 '20 at 03:32
0

You can use 33vh (it should match the number with .sun's height) for child width. See the CSS for .moon element.

* {
  padding: 0;
  margin:0;
}
.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sun {
  position: relative;
  width: 33%;
  /*padding-top: 33%;*/
  height: 33%;
  background: yellow;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.moon {
  background: blue;  
  /*object-fit: fill;*/
  border-radius: 50%;
  height:min(33vh, 33vw);
  width: min(33vh, 33vw);
}
<div class="sky">
  <div class="sun">
    <div class="moon"></div>
  </div>
</div>

You can see it here also..

Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21