前段时间刚踩过的坑，拿出来与大家一起分享。
如下图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
最后补充一点，做响应式，也可以用这种方法。