扫码关注官方订阅号
认证0级讲师
既然你提到希望等比缩放，那么你可以这么做，直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> p { 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> <p class="slide-wrap"> <p class="height"></p> <p class="slide-container"></p> </p> <!--如果不考虑兼容性的话,可以使用CSS3的新特性 vw 单位, vw 即 view width 视窗宽度--> <p style="width: 100%;height: 50vw;background: red;max-height: 400px"></p> </body> </html>
这里还有个问题，就是等比缩放的设计中最好为容器定义一个最大高度，即max-height，否则在宽屏上面显示的效果会是轮播的高度大于一屏
max-height
高度用vh作单位，但是同时要考量宽带的等比缩放，避免变形
使用vw单位即可
vw
我目前只会使用js来设置这种的高度，但效果不好
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
4
409
收藏
既然你提到希望等比缩放，那么你可以这么做，直接上代码：
这里还有个问题，就是等比缩放的设计中最好为容器定义一个最大高度，即
max-height，否则在宽屏上面显示的效果会是轮播的高度大于一屏高度用vh作单位，但是同时要考量宽带的等比缩放，避免变形
使用
vw单位即可我目前只会使用js来设置这种的高度，但效果不好