nyctoe
- 发布：2014-09-20 17:36
- 更新：2014-09-21 02:34
- 阅读：9387
如何设置图片轮播的图片等比缩放全屏居中？
分类：MUI
下个版本将内置mui-fullscreen样式。目前你可以先自己加上测试使用
css代码
{{{
.mui-fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.mui-fullscreen .mui-slider-group {
height: 100%;
}
.mui-fullscreen .mui-slider-item > a {
top: 50%;
transform: translateY(-50%);
}
}}}
html代码
{{{
<div class="mui-slider mui-fullscreen">
}}}
最终效果
回复 nyctoe:cover也是会拉伸的。也需要你的图片宽高比例跟屏幕一致才能达到完美显示效果。
自己写css，将A节点设置width:100%,height:100%
然后设置A的background相关样式即可。
如下所示
nyctoe (作者)
图片不能全屏啊
2014-09-20 18:24
DCloud_UNI_FXY
回复 nyctoe:默认的都是宽度100%,高度按比例缩放。你想高度100%,宽度按比例？还是说，你想要图片铺满整个屏幕？
即想铺满屏幕，又想按比例，图片不变形。那就要求你的图片宽高比必须跟屏幕的宽高比一致。否则不可能既铺满，还不变形。当然还有一种做法。对图片设计有要求。图片尽量做得大一些。通过backgrond-image来显示图片。background-position:center center;这样的话。不同屏幕尺寸，显示的都是图片中间的内容。
2014-09-20 20:04
nyctoe (作者)
回复 DCloud_UNI_FXY:background:url(1.jpg) no-repeat center center; background-size:cover; 如这效果
2014-09-20 22:39
小权
ios真机不支持translateY
2015-10-15 10:27