css控制图片大小

网站有3种图片格式：390*214、214*214、142*177，列表页怎样将图片统一显示为150*150来进行调用，图片不能变形、拉伸。
之前遇到的问题是：我设置图片div为width:150px;height:150px;overflow:hidden;然后设置img为width:150px;height:auto;这样对于正方形图片和142*177格式的图片能够不变形的实现调用，但另一种390*214格式的就又不行了，会被缩放成150*82的尺寸，容器将近一半会是空的，很不好看。
请教各位老师，有什么好的办法能够解决我的问题，哪怕是对图片超出容器部分进行裁剪都行，只要这3种格式的图片能按150*150格式不变形（要显示图片的中心区域）的被调用在列表页就行，弄了好多天了，还是没弄好，请老师帮帮忙。谢谢！

如果你不想ps图片的话，你就把图片设置为那个div背景，然后让他center top 这样就相当于是裁剪图片了吧..然后位置你自己调调，这相当于是给图片加上一个相框，只显示这个框内的范围。不过还是建议你ps处理下图片....

如果你是用img标签来显示你的图片的话，可以这样分类方便自己的操作

<div class="size40">

<img src='图片路径' />

</div>

<div class="size20">

<img src='图片路径' />

</div>

<style type='text/css'>

.size40 img{width:40px; height:40px;}

.size20 img{width:20px; height:20px;}

</style>

这样在相应的区域里面的图片无论大小是多小都会按照区域大小来限制了。

如果你是用background来显示图片则不能控制图片的缩放，只能控制显示区域，对于小于40*40的20*20图片如果你只想填充的话可以加入repeat来平铺填充。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息