围绕可变高度的 div 画一个完美的圆圈

Question

我对此进行了相当多的研究，但似乎找不到一个好的、可靠的答案来找到如何围绕可变高度的 div 元素制作一个响应圈。

使用vw单位很容易制作一个简单的响应圈。

<div style="height:20vw; width:20vw"></div>

但是，我希望使用元素的最小高度并在这个 div 周围有一个圆圈。

创建响应圈的另一种方法是使用类似下面的代码片段，但我不能再次调整它以适用于可变高度（同样，我不能使用vh单位，因为 div 的高度会发生变化。

 .square { position: relative; width: 10%; background: gray; border-radius: 50%; }.square:after { content: ""; display: block; padding-bottom: 100%; }.content { position: absolute; width: 100%; height: 100%; }

 <div class="square"> <div class="content"> </div> </div>

我正在尝试创建类似下面的内容，其中圆圈永远不会切入 div 的角落（大约 10px 填充）。 我个人试图避免 javascript 并且更喜欢 css 唯一的方法，但它似乎是不可避免的。 也许唯一的解决方案是使用 jquery 来计算元素的高度，以便将其应用于包装元素？

我在玩这个：

 .square { position: absolute; top: 50%; display: inline-block; left: 50%; transform: translate(-50%, -50%); min-height: 100px; border-radius: 50%; background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium'); background-size: 100% 100%; padding: 20px; }.content { width: 300px; min-height: 100px; background: tomato; }

 <div class="square"> <div class="content"> Hello!<br> <br><br><br>This has a variable height but fixed width<br><br><br>Hello </div> </div>

Answer 1

如果您考虑纯色， Clip-path可以轻松做到这一点。

调整元素的大小，圆圈将跟随：

 .box { width: 200px; height: 200px; overflow: hidden; resize: both; background: blue; box-shadow: 0 0 0 200vmax red; clip-path: circle(71%); margin: 100px auto; }

 <div class="box"></div>

了解幻数71%的相关问题： clip-path:circle() 半径似乎没有正确计算

---

要使用图像，我们可以考虑伪元素。 您还可以依靠calc()添加偏移量：

 .box { width: 200px;= resize: both; clip-path: circle(calc(71% + 10px)); margin: 100px auto; position: relative; font-size:35px; color:#fff; } /* the background layer */.box::before { content:""; position: absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:blue; } /* the image layer */.box::after { content:""; position: fixed; /* to make sure the image cover all the screen */ z-index:-2; top:0; bottom:0; left:0; right:0; background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat; }

 <div class="box" contenteditable="true"> Edit this<br>text </div>

Answer 2

我尽力用纯 css 来解决这个问题。 虽然 css 的问题我不知道如何根据内容 div 大小计算圆的直径； 可变高度 div 从左上角到右下角的长度。

我不确定是否可以使用calc() css function 来完成。

但我确实设法用一点 jquery 来做到这一点（如果你不使用 jquery，它可以很容易地改为纯 javascript）。

请参阅下面的可调整大小的示例（按照我在代码中的评论）

注意：如果您使用 Internet Explorer，可调整大小的演示内容 div 将不会调整大小。

 // circumscriber for variable size divs function circumscriber() { // for each variable size div on page $(".variable-size").each(function() { // get the variable size div content width and height let width = $(this).outerWidth(); let height = $(this).outerHeight(); // get the diameter for our pefect circle based on content size let diameter = Math.sqrt(width ** 2 + height ** 2); // extra 15 pixel circle edge around variable size div let edge = 15; // add current circle size width css $('.circle', this).css({ 'width': (diameter + (edge * 2)) + 'px' }) }); } // run the circumscriber (you might wana do this on ready) circumscriber(); // if the window is resized responsively $(window).on('resize', function() { circumscriber(); }); // for demo purpose to fire circumscriber when resizing content // not needed for real thing $('.content').on('input', function() { this.style.height = ""; this.style.height = ( this.scrollHeight - 30 ) + "px"; circumscriber(); }).on('mouseup', function() { circumscriber(); });

 /* variable size container to be circumscribed by circle */ /* none of these styles are required, this just to center the variable size div in the window for demo purposes */.variable-size { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* resizable text area for demo */ /* again not needed */.variable-size.content { padding: 15px; background: #fff; resize: both; overflow: auto; color: #000; border: none; width: 200px; font-weight: bold; }.variable-size.content:focus { outline: 0; } /* child circle div css */.variable-size.circle { position: absolute; background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium'); background-position: center center; z-index: -1; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease; width: 0; } /* fast way to make circle height the same as current width */.variable-size.circle:before { display: block; content: ''; width: 100%; padding-top: 100%; } /* demo window css */ HTML, BODY { height: 100%; min-height: 100%; background: black; position: relative; font-family: "Lucida Console", Courier, monospace; }

 <div class="variable-size"> <textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME &#8600;"></textarea> <div class="circle"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在这里看到jsfiddle ... https://jsfiddle.net/joshmoto/6d0zs7uq/

Answer 3

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

资料来源： https://www.w3schools.com/

Answer 4

您可以使用 flex display 并在内部 div 周围插入空的 flex-items 并使用 flex-basis 来固定它们的宽度。

尝试这个

 .square { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100px; border-radius: 50%; background: black; background-size: 100% 100%; padding: 20px; }.content { width: 300px; min-height: 100px; background: tomato; }.emptyDiv { flex-basis: 120px }

 <div class="square"> <div class="emptyDiv"></div> <div class="content"> Hello!<br> <br><br><br>This has a variable height but fixed width<br><br><br>Hello </div> <div class="emptyDiv"></div> </div>