欢迎光临万书涛的个人博客

网页图片列表随着窗口变化出现错位导致页面变形通用解决方法

作者:万书涛  / 日期:2020-08-11 19:54:42 /  来源:本站原创 /   浏览:
摘要
在网站开发过程中,有一种图片列表的布局,这种布局一般是加float浮动后一行排列,可是有的时候会出现随着浏览器窗口大小不同图片错位导致页面变形,那这是什么原因呢?今天万书涛就以实际案例来说明一下这个问题  
今天万书涛在开发一套门窗企业模板时候,其中有一个产品中心是列表式布局,这种布局一般是使用float左浮动,然后其他图片就成为一行了,可是在加上float浮动后,在放大和缩小窗口时候,图片却出现了错位导致页面变形,如下图一,可以看到第二排图片出现了错位

图片错位截图一

出现这个的原因是图一中的六张图片高度有细微差别,并不是完全一样的大小,因为我们在响应式布局中一般是对宽度进行百分比操作,而高度却难以精确控制,如果把高度控制死了会导致响应式放大缩小时图片变形,不控制死就会出现上面的图片错位的情况,这个在我们日常开发中经常遇到,photoshop切图时很难保证每一个图片高度丝毫不差,那么这个问题如何解决呢,答案是用vw布局。
 
vw,是一个相对单位,它是相对视窗的宽度,而我们的浏览器或者手机移动端视窗是固定大小的,无论我们怎样扩大和缩小视窗,又或者在不同大小屏幕下,视窗都有一个固定的宽度,这样就为我们定位相对宽度或者高度有一个很好的参照物,1vw等于视图窗口的1%,我们根据元素占的比例采用适当大小的vw。
 
我上面的列表是3个图片一行,一个图片去除外边距,大约占32%,而图片高度和宽度比例约为262:207,所以高度定位25vw,果然页面变形问题解决,如下图二。

图片正常缩略图二

关键代码如下:
.waiceng{ height:25vw, width:32%}
.waiceng img{width:100%; height:100%}
 
代码解析:图片外层采用height:25vw,让高度既能随着窗口宽度大小自动缩小放大,又能够保持一个固定高度,让所有列表图片保持一个高度,这样列表就不会变形了,对于响应式设计来说,无疑是一个比较好的解决方法。
 
以上就是在网页布局中遇到的图片错位的通用解决方法,这个方法不依赖于其他框架或者js,只用css即可解决问题。
 
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/grbkjc/108.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息