最新消息:文章中包含代码时,请遵守代码高亮规范!

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

HTML+CSS Niki 166浏览 0评论

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

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

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

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

background-size:cover;

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

 

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

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

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

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

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

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


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

您必须 登录 才能发表评论!