Question

目前，我正在设置一个变量以对应圆的宽度和高度，如下所示：

NODE                     EXPLANATION
----------------------------------------------------------------------
  (?<=                     look behind to see if there is:
----------------------------------------------------------------------
    \s                       whitespace (\n, \r, \t, \f, and " ")
----------------------------------------------------------------------
   |                        OR
----------------------------------------------------------------------
    ^                        after an optional start of the string
----------------------------------------------------------------------
  )                        end of look-behind
----------------------------------------------------------------------
  [^a-zA-Z0-9\s]{8}           any character except: 'a' to 'z', 'A' to
                           'Z', '0' to '9', whitespace (\n, \r, \t, \f, and " ")
                           (8 times)
----------------------------------------------------------------------
  (?=                      look ahead to see if there is:
----------------------------------------------------------------------
    \s                       whitespace (\n, \r, \t, \f, and " ")
----------------------------------------------------------------------
   |                        OR
----------------------------------------------------------------------
    $                        before an optional \n, and the end of a
                             "line"
----------------------------------------------------------------------
  )                        end of look-ahead
----------------------------------------------------------------------

但是，圆的宽度变为父元素宽度的70％，高度变为父元素高度的70％，这会产生比它高的椭圆。理想情况下，我想将$circle-diameter: 70%; .circle { width: $circle-diameter; height: $circle-diameter; }转换为固定大小，并将圆的宽度和高度指定为固定大小。在CSS / SASS中是否有解决方案？

Answer 1

您可以使用padding-top代替height，因为填充是相对于父宽度的。{/ p>

.circle{
  width: 70%;
  padding-top: 70%;
  /* height: 0; */
}

http://codepen.io/yukulele/pen/PzGgNM

Answer 2

您要找的是宽度和高度之间的固定比率。对于一个圆圈，宽度/高度比为1.有一种hacky方式来完成该任务。首先，我想编写一个css类，它总是为我们提供宽度/高度比为1的空间。为此：

请参阅Fiddle

为什么会这样？因为，如果在填充上使用基于百分比的单位，它总是相对于元素的宽度。 See reference

接下来，我总是喜欢使用绝对黑客为我自己提供一个解决方案，在我们创建的1/1比例正方形中。

请参阅Fiddle 2

使用position：absolute作为我们自己的好处，我们创建了一个具有固定比率且具有工作宽度/高度属性的元素。

取决于你需要做什么。在你的情况下，我已经创建了一个很好的圆圈来检查情况。

请参阅Fiddle 3

工作源代码

**Css**

.ratio-1 {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: silver;
}

.im-something-has-some-width {
  width: 200px;
  border: 3px solid lime;
}

.space-provider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.yay-i-have-a-square-field {
  // lets use it for our own goods!
  width: 100%;
  height: 100%;
  background-color: skyblue;
  border-radius: 50%;
}

<强> HTML

<div class="im-something-has-some-width">
  <div class="ratio-1">
    <div class="space-provider">
      <div class="yay-i-have-a-square-field">

      </div>
    </div>
  </div>
</div>

评估SASS中像素的百分比

2 个答案:

工作源代码