老师,求解
来源:1-1 Vue项目详情页 - 动态路由和banner布局
z慌慌
2020-09-11 18:10:00
如图:
1.width设置100%,右边会有白色缝隙
2.居中问题:设置了height=0,width=100%,padding-bottom:100%,高度总是比图片要高,导致页面看起来没有垂直居中。
附上代码布局和样式截图,由于vue-cli的版本比较新,没有按照老师的vue-cli的版本来做。
所以,首页的轮播图,首页轮播图下的图标,都是用swiper自己做了一层封装来使用。
所以,在这个详情页中,引用了自己封装的那个组件来实现滑动。
滑动等功能没什么问题,就是布局有点奇怪
布局
样式:
1回答
好帮手慕久久
2020-09-11
同学你好,问题解答如下:
1. 从代码上看,没有什么问题,白色间隙,可能是浏览器渲然造成的,同学可以在真机上看一下是否有该白边,毕竟浏览器模拟出来的移动端环境,与真机还是稍微有些区别的。
2. 居中问题,是由于同学换图了,同学的图片宽高比不是1:1,所以图片宽度设置成100%后,高度并不是100%。实际开发中,图片都会符合要求,比如这个项目中,就会要求图片是1:1的。
另,同学可以设置图片相对于swiper-slide水平垂直居中,这样就可以解决图片高度不同这个问题。
如果我的回答帮到了你,欢迎采纳,祝学习愉快!
相似问题