网页图片列表随着窗口变化出现错位导致页面变形通用解决方法-个人博客网站搭建

今天万书涛在开发一套门窗企业模板时候，其中有一个产品中心是列表式布局，这种布局一般是使用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即可解决问题。


PS：本文来自万书涛的个人博客，感谢分享。