经常头疼于在产品展示、推荐产品等图片列表中遇到需要将图片挨着一个个按比例缩小到css中适合的宽度与高度，如果图片少了还好说，可是如果图片多了那就相当麻烦了，我们要去一张张的处理，做着重复的动作，久而久之，就失去了一些做网页的乐趣。这里我们介绍一种无须处理图片的方法，利用css将图片等比例缩小，具体方法请参照下面的代码。

css实现图片按比例缩小

css代码如下：

<style type="text/css">

ul{clear:both;}

ul li{float:left;border:1px solid red;width:120px;list-style:none;}

/*图片最外层设置其宽度*/ 

ul li a{display:block;width:120px;height:90px;}

/*中间层设置 其高与宽*/

ul li a img{height:90px;overflow:hidden;}

/*图片本身设置其宽度*/ 

</style>

html代码如下：

<ul class="list">

	<li>

		<a href=""><img src="qqgzs1.jpg"/></a>

		<a href="">这里是图片描述1</a>

	</li>

	<li>

		<a href=""><img src="qqgzs2.jpg"/></a>

		<a href="">这里是图片描述2</a>

	</li>

	<li>

		<a href=""><img src="qqgzs3.jpg"/></a>

		<a href="">这里是图片描述3</a>

	</li>

</ul>

通过以上css代码把图片按比例缩小，是不是感觉效率提高了很多？