可以仅使用CSS来将宽度和高度相等的子项刻成一个不超过其父项的子项吗？

如何解决可以仅使用CSS来将宽度和高度相等的子项刻成一个不超过其父项的子项吗？

我的想法是使子对象（@example为“ .moon”）具有相等的高度和宽度值，并且不超过父对象的宽度或高度（@example为“ .sun”）

因此，当父级宽度大于其高度时，子级的width和height值较小，即父级高度。

以相同的方式，当父高大于其宽度时，孩子的width和height的值就是较小的父宽。

我的意思是在容器内刻一个对象，但只能使用CSS。

仅当父级宽度大于其高度时，“ padding-top”技巧才起作用。而且“对象匹配”仅适用于我猜想的图像。

我确实引用了圆圈，只是为了清楚说明边必须具有相同的值（高度和宽度），并且子对象可以包含元素。

我知道用JavaScript取得父项的高度和宽度，比较较小的并将其设置为子项的高度和宽度，可以完美地做到这一点，我用jQuery做到了，但想知道如果没有jQuery，是否有可能实现它或JavaScript，纯CSS。

尝试示例并调整屏幕大小。

type Container<T> = { value: T };
type ContainerA = Container<string | number>;
type ContainerB = Container<string> | Container<number>
type ContainerC<T extends string | number> = Container<T>;

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': 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%;*/
}

解决方法

如果只需要视觉效果，可以使用渐变：

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>

与蒙版相同的逻辑，并且可以使用任何背景：

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,transparent 100%);
          mask:radial-gradient(circle closest-side,transparent 100%);
}

<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

您也可以像下面那样考虑使用min() / max()

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>

也如下：

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>

是否需要外接圆的相关问题：Make a perfect circle around a div of variable height

,

您可以使用33vh（它的数字应与.sun的高度匹配）作为子级宽度。请参见.moon元素的CSS。

* {
  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>

您也可以here看到它。.