前段时间刚踩过的坑，拿出来与大家一起分享。
如下图1，所示，大家做网页时有没有遇到过呢？ 因为不同电脑有不同的分辨率，当在浏览器浏览时，可以通过Ctrl+滚动滚轮，调节大小，来模拟不同的分辨率。
图1
当使用固定高度时，就会出现如图1所示的问题，或者图片会变形。
那么闲话不多说，直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应（不设高度）- demo </title> </head> <style> * { padding: 0; margin: 0; } .nav { position: relative; padding: 10px 0; width: 100%; display: inline-block; background: gray; } .nav_con { display: inline-block; margin-left: 50px; line-height: 30px; } .nav_con ul { width: 100%; } .nav_con ul li { float: left; list-style: none; margin-left: 60px; } .lunbo { position: relative; width: 100%; } .lunbo img { width: 100%; } .lun_nav { position: relative; width: 100%; } .lun_nav a { float: left; width: 33.33333%; overflow: hidden; } .lun_nav a img { width: 100%; transition: .4s; } .lun_nav a img:hover { transform: scale(1.1); } </style> <body> <div class="nav"> <div class="nav_con"> <ul> <li>首页</li> <li>导航</li> <li>联系我们</li> <li>资料</li> <li>个人中心</li> <li>游戏</li> <li>相册</li> </ul> </div> </div> <div class="lunbo"> <img src="images/banner1.jpg"/> </div> <div class="lun_nav"> <a href="#"> <img src="images/nav1.jpg"/> </a> <a href="#"> <img src="images/nav2.jpg"/> </a> <a href="#"> <img src="images/nav3.jpg"/> </a> </div> </body> </html>
ps: 图片可自己替换，我这里不提供。因为重点在代码。（不同分辨率，效果都一样，亲测有效。）
大家可以看到css样式中，所有元素都没有设置固定的高度。效果图，如图2所示。
图2
最后补充一点，做响应式，也可以用这种方法。