android 轮播图变形,网站端轮播图充满全屏且不变形问题【原创】

不论是pc端和微信端的项目,都会有轮播图,如果我们写轮播图又不想图片变形而且可以显示主要的中间部分。

1,如果使用img标签的话,图片使用width:100%,height:auto,但是 图片会有问题,当屏幕较小的时候轮播图会出现空白的地方,但是如果使用height:100%(就是轮播图最外面的主体高度)这样轮播图就会变形的,这样肯定是不行的

2,如果使用background的话,这样就可以完美的解决这个问题了

使用background:url() center center no-repeat;

background-size:cover;

因为项目中遇到轮播图的情况很多,轮播图处理不好,会很麻烦,这样就不会出现这种问题了

还有刚进入页面的时候,网速较差的时候会出现轮播图平铺的问题,这样用户体验性就很不好

我在写项目的时候,使用了一种解决的方法,就是在css里面写上

除了第一个轮播图图片其余的都不让其显示

然后再js里面写上在页面加载完成的时候所有的轮播图显示出来

这样就不会有这样的问题了

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/22214.html

75d087ef9a9fb11dc373caaf33adbf7f.png

微信打赏

支付宝打赏

感谢您对作者Niki的打赏,我们会更加努力!    如果您想成为作者,请点我

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值