javascript - 移动端轮播高度计算的问题，求助求助！！！！！
本文介绍了javascript - 移动端轮播高度计算的问题，求助求助！！！！！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如图，轮播的高度我在css里面是写死的，这样就导致了不同手机下高度是不变的，没法等比缩放高度，请问该怎么计算？
解决方案
既然你提到希望等比缩放，那么你可以这么做，直接上代码：
<!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，否则在宽屏上面显示的效果会是轮播的高度大于一屏
这篇关于javascript - 移动端轮播高度计算的问题，求助求助！！！！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
