图片按比例缩小,溢出超出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="https://www.lanka.cn/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%的意思是减少过多的图片底部区域隐藏


大功告成,收工。