For the calculation of the rotation height at the mobile terminal, please ask for help! ! ! ! !

  node.js, question


As shown in the figure, the height of the carousel is Hard coding in css, which leads to the same height under different mobile phones. It is impossible to scale the height equally. How do you calculate it?

Since you mentioned hopegeometric proportionZoom, then you can do this, directly on the code:

<!  DOCTYPE html>
 <html lang="en">
 <meta charset="UTF-8">
 div {
 box-sizing: border-box;
 .slide-wrap {
 Width: 100 percent;
 position: relative;
 .height {
 Padding-top: 60 per cent;  //Here is the height ratio
 .slide-container {
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: #ddd;
 max-height: 400px;
 <div class="slide-wrap">
 <div class="height"></div>
 <div class="slide-container"></div>
 <!  -if compatibility is not considered, the new feature vw unit of CSS3 can be used, vw is the view width window width->
 < div style="width: 100 percent;  height: 50vw;  background: red;  max-height: 400px"></div>

There is another problem here, that is, it is best to define a maximum height for the container in the design of proportional scaling, i.e.max-heightOtherwise, the effect displayed on the widescreen will be that the carousel height is greater than one screen.