可以只使用 CSS 来刻写一个宽度和高度相等的孩子，不超过它的父母吗？

Question

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

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

同样，当父高度大于其宽度时，子宽度和高度的值是较小的值，即父宽度。

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

“padding-top”技巧仅在父宽度大于其高度时才有效。 我猜“对象适合”只适用于图像。

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

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,纯 CSS。

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

 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>

Answer 1

如果您只想要视觉效果，可以使用渐变来完成：

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

如果您想要外接圆，相关问题：围绕可变高度的 div 制作一个完美的圆

Answer 2

您可以使用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>

你也可以在这里看到..