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

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

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

那么问题就是结局图片会撑破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%的意思是减少过多的图片底部区域隐藏

大功告成，收工。

html图片超出内容隐藏,图片按比例缩小，溢出超出DIV边框的内容自动隐藏方法！...相关推荐

mac虚拟机桌面图标隐藏_桌面美化，任务栏、桌面图标和鼠标箭头自动隐藏！
生命不息,折腾不止!自动用上电脑,人类就在电脑桌面美化的道路上行走.从苦苦寻觅各种壁纸,到各种主题DIY:从图标美化,到鼠标指针美化:从任务栏透明化,到各种桌面挂件.甚至有的小伙伴们,硬生生把Wind ...
解决MacOS Dock栏不能自动隐藏
已经在设置里面打开了了自动隐藏MacOS Dock栏功能,但是实际上不能自动隐藏. 分别依次运行下面三行终端命令: defaults write com.apple.dock autohide-del ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
单行溢出隐藏没生效_溢出隐藏：最全的利用css解决内容溢出问题的几种方案
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
html表格内容溢出隐藏,溢出隐藏：最全的利用css解决内容溢出问题的几种方案...
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
KindEditor中使用val()获取content内容后图片不显示
场景使用KindEditor进行图片上传后,在js部分通过.val()获取内容后, 所获取的图片的<imgsrc=""其中img标签与src连接在了一起导致图片不能显示. ...
显示隐藏图片html,JavaScript实现显示和隐藏图片
JavaScript之显示和隐藏图片,供大家参考,具体内容如下点击按钮可以显示和隐藏图片(默认显示),附上代码: 显示和隐藏图片隐藏 // 1.获取事件源 var obtn = document. ...
html图片的隐藏与显示,Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以 ...

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

html图片超出内容隐藏,图片按比例缩小，溢出超出DIV边框的内容自动隐藏方法！...相关推荐

最新文章

热门文章