Question

基本上，我希望子元素使用其父维度成为正方形，但它不会溢出，因此需要使用高度/宽度之间的最小值。

我知道在实践中css中没有math.min，但是也许可以通过结合使用flexbox或其他一些显示器来实现？

最后，我要实现的是一个响应式“加载微调器”类，该类仅使用css即可在任何元素上工作，而无需添加任何类。

这个小提琴说明了我的问题：http://jsfiddle.net/ppgab/adfnc5tk/40/

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
    to {transform: rotate(360deg);}
}
.loading::before {
    position:absolute;
    content : '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 2;
    opacity: 0.2;
}
.loading::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner 1s ease infinite;
    z-index: 3;
    padding-top: calc(12.5% - .5em);
    border-width: .5em;
    padding-bottom: calc(12.5% - .5em);
}
.loading.loading-sm::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner 1s ease infinite;
    z-index: 3;
    padding-top: calc(12.5% - .1em);
    border-width: .1em;
    padding-bottom: calc(12.5% - .1em);
}
.loading {
    position: relative;
    pointer-events: none;
    cursor: wait;
}

.body {
  text-align:center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding : 1rem;
  align-items: center;
}

.inner-div {
  background-color: red;
  width: 500px;
  height: 100px;
}

<body class="body">
  <h1 class="loading">
    If you increase this width too much it overflows, since the sizing is based on width
  </h1>
  <h3>
    But if you reduce the width too much it gets ugly :(
  </h3>
  <button style="font-size:2rem;width:200px;margin:1rem" class="loading loading-sm">
Button
</button>
  <div class="inner-div loading">
    This fixed element doesn't work either
  </div>
</body>

我是CSS的初学者，上面的代码混合了几个在线示例，所以我真的不知道我在做什么。

不会溢出父级的响应式方形伪元素

0 个答案: