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

Question

前一段时间我问了这个问题,但从那时起我就知道这不是解决这个问题的好方法,所以我重写了我的整个设计:

---

我目前有一个圆柱体,我将用它来生成"罐子里有多少液体"的三维可视化.它将从数据库中获得其百分比值.

我目前有以下标记:

$(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%)的值时,水箱失去其完整性并且值无法正确显示(即液体出现在其容器外部).

这在具有较小值的较小屏幕上更容易看到.

有人会建议如何改变我目前的标记,以阻止"底部从容器底部掉落"？

任何进一步的澄清我都乐意进一步解释.

---

小心思考

Answer 1

主要问题是你使用几个单位(px, %, vw)来表示元素的高度,这使计算变得复杂.我更改了elipses值的高度,4vw以便它们响应视口宽度(如坦克的高度)并使计算更容易.

然后你需要计算高度.contains.它的最小高度是4vw(= 10%of 40vw),所以它应该36vw从4vw到40vw.正如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>