围绕可变高度的div制作一个完美的圆 [英] Make a perfect circle around a div of variable height

问题描述

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

I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.

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

It's easy to make a simple responsive circle using vw units.

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

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

However, I'm looking to use a min-height of an element and have a circle around this div.

创建响应圆的另一种方法是使用类似下面的代码段，但是同样，我无法适应可变高度(同样，我不能将 vh 单位用作div的高度会改变.

Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.

.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的角(填充约10像素).我个人试图避免使用javascript，并且本来希望使用仅css的方法，但这似乎是不可避免的.也许唯一的解决方案是使用jquery来计算元素的高度，以将其应用于包装元素?

I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?

我正在玩这个游戏:

.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>

推荐答案

剪切路径可以轻松地做到这一点.

Clip-path can easily do this if you consider solid coloration.

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

Resize the element and the circle will follow:

.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()半径不正确"t似乎计算正确了

Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly

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

To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:

.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>

这篇关于围绕可变高度的div制作一个完美的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！