3D 圆柱体在小值上失去完整性

Question

不久前我问过this question，但从那以后我了解到这不是解决这个问题的好方法，所以我重写了我的整个设计：

---

我目前有一个圆柱体，我将用它来生成“一个罐子里有多少液体”的 3D 可视化。它将从数据库中获取其百分比值。

我目前有以下标记：

$(document).ready(function () {

    var t = (parseInt($('#number').val()));

    $('.containts').css("height", t + "%");
    $('.tank').addClass("makeSmall");
});

 $('#this').on("click",function(){
       var y = (parseInt($('#number').val()));
        $('.containts').css("height", y + "%");
        $('.containts').text(y+"%");
    });

.tank {
    height:40vw;
    width:40vw;
    position:relative;
    z-index:2;
    transition:all 1s;
}
.makeSmall {
    height:40vw;
    width:40vw;
}
.tank:before {
    height:100%;
    width:100%;
    border-radius:100%/30px;
    background:rgba(0, 0, 0, 0.2);
    content:"";
    position:absolute;
}
.tank:after {
    content:"";
    position:absolute;
    border-radius:100%/30px;
    height:30px;
    top:0;
    left:0;
    width:100%;
    background:rgba(0, 0, 0, 0.4);
}
.containts {
    position:absolute;
    background:rgba(255, 0, 0, 0.8);
    bottom:0;
    height:1%;
    width:100%;
    text-align:center;
    border-radius:100%/30px;
    transition:all 1.5s;
        color:white;
}
.containts:after {
    content:"";
    position:absolute;
    background:rgba(0, 0, 0, 0.2);
    top:0;
    left:0;
    height:30px;
    width:100%;
    border-radius:100%/30px;
    border-bottom:1px solid black;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
    
    <div class="containts">50%</div>
</div>
<br/>
<br/>
<br/>
<br/>
Please enter a valuse between 0 and 100:
<input type="number" value="50" id="number" />
<button id="this">GO</button>

但是，当我使用大约小于 10（即 10%）的值时，水箱会失去完整性并且无法正确显示该值（即液体出现在其容器“外部”）。

这在具有较小值的较小屏幕上特别容易看到。

有人会建议如何更改我当前的标记以阻止“底部从容器底部掉落”吗？

如有任何进一步的说明，我很乐意进一步解释。

---

fiddle for thought

Answer 1

主要问题是元素的高度使用了多个单位 (px, %, vw)，这使得计算变得复杂。我将省略号值的高度更改为4vw，以便它们响应视口宽度（如坦克的高度）并使计算更容易。

然后你需要计算.contains的高度。它的最小高度是4vw（= 10%of 40vw），所以它应该跨越从4vw到40vw的36vw。作为36 = 40* 0.9，你可以写：

var t = (parseInt($('#number').val())),
    h = t*0.9 + 10 ;
    $('.containts').css("height", h + "%");

DEMO

$(document).ready(function() {
  var t = (parseInt($('#number').val())),
    h1 = t * 0.9 + 10;
  $('.containts').css("height", h1 + "%");
  $('.tank').addClass("makeSmall");
});

$('#this').on("click", function() {
  var y = (parseInt($('#number').val())),
    h2 = y * 0.9 + 10;
  $('.containts').css("height", h2 + "%");
  $('.containts').text(y + "%");

});

.tank {
  height: 40vw;
  width: 40vw;
  position: relative;
  z-index: 2;
  transition: all 1s;
}
.makeSmall {
  height: 40vw;
  width: 40vw;
}
.tank:before {
  height: 100%;
  width: 100%;
  border-radius: 100%/30px;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
}
.tank:after {
  content: "";
  position: absolute;
  border-radius: 100%/30px;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.containts {
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  bottom: 0;
  height: 0;
  width: 100%;
  text-align: center;
  border-radius: 100%/30px;
  transition: all 1.5s;
  color: white;
}
.containts:after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  border-radius: 100%/30px;
  border-bottom: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
  <div class="containts">0%</div>
</div>
<br/>
<br/>
<br/>
<br/>Please enter a valuse between 0 and 100:
<input type="number" value="0" id="number" />
<button id="this">GO</button>