图片按比例缩小，溢出超出DIV边框的内容自动隐藏方法！

这几天在学习百度搜索结果出现缩略图的方法，百度PC的缩略图比例：121：75，我的文章列表页的比例为121:54，比例相差太大，所以最近的文章缩略图基本没有。

而如果将列表图片改为121：75比例后，布局的用户体验又会下降很多，有无法单独为og:image设置一张图片，后来考虑后就使用统一的。

那么问题就是结局图片会撑破DIV，让网页布局错位变乱。

代码其实很简单  

<div class="thumb">
<a href="https://www.lanka.cn/tengxunziti_1422.html" target="_blank"><img src="/usr/uploads/2017/11/1257511133.jpg"></a>
</div>

这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。

这时我们可以使用CSS overflow样式解决：对应样式overflow:hidden

首先对DIV的宽高定义，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

.thumb{width:850px;height:380px;overflow:hidden}

其实一般网站到这里就可以OVER了，任务完成。

不过我的网站内页的文章上面图片是100%的背景调用缩略图，所以缩略图设置的比较大，宽度为1900px，所以我又加了对img的设置

.post .thumb img{max-width:850px;width:850px;width:expression(document.body.clientWidth>850?”850px”:”auto”);vertical-align: middle; margin-top: -10%;}

max-width:850px; 在IE7、FF等其他非IE浏览器下最大宽度为850px。但在IE6中无效。

width:850px; 在所有浏览器中图片的大小为850px;

当图片大小大于850px，自动缩小为850px。在IE6中有效。

overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

-10%的意思是减少过多的图片底部区域隐藏

大功告成，收工。