移动端轮播高度计算的问题，求助求助！！！！！

热饭班长

3.7k20241349

发布于
2016-06-04

如图，轮播的高度我在css里面是写死的，这样就导致了不同手机下高度是不变的，没法等比缩放高度，请问该怎么计算？

javascript css html

html5 node.js

阅读 3.6k

4 个回答

Youwei

✓ 已被采纳

既然你提到希望等比缩放，那么你可以这么做，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <style>
    div {
      box-sizing: border-box;
    }
    .slide-wrap {
      width: 100%;
      position: relative;
    }

    .height {
      padding-top: 60%;// 这里就是高度比例
    }

    .slide-container {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: #ddd;
      max-height: 400px;
    }
  </style>
</head>
<body>
<div class="slide-wrap">
  <div class="height"></div>
  <div class="slide-container"></div>
</div>

<!--如果不考虑兼容性的话,可以使用CSS3的新特性 vw 单位, vw 即 view width 视窗宽度-->
<div style="width: 100%;height: 50vw;background: red;max-height: 400px"></div>

</body>
</html>

这里还有个问题，就是等比缩放的设计中最好为容器定义一个最大高度，即max-height，否则在宽屏上面显示的效果会是轮播的高度大于一屏