圍繞可變高度的 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>