解决轮播图图片大小不一的问题!


对于大小不一样的图片做成整齐排列的轮播,如果直接固定宽高会把图片伸缩变形的,不固定又会让图片不整齐,用ps截图截成一样的大小难度系数略高。解决办法:

假如有4张图,我们就写4个一样大小一样的div,固定div的宽高而不去直接操作图片的宽高,

然后将图片作为div的背景图来显示,即background-image:url("图片地址");

让后让背景图的位置设为居中,background-position:center center, 这样图片始终显示原始图片的中央部分,不论div大小怎么变化;

考虑到如果图片太大,div太小,这样会只导致显示图片的很小的局部,我们给背景设置background-size:cover,让背景图片足够大,以覆盖整个div区域。

猜你喜欢

转载自blog.csdn.net/illusion_melody/article/details/80651019
今日推荐