ydzf.net
当前位置:首页 >> html图片超出部分隐藏 >>

html图片超出部分隐藏

把图片作为div的背景图片是最容易实现你所要的效果的方式:<div style="width:400px; height:400px; background:url(图片url写在这) no-repeat center / cover"></div>如果一定要用img标签那就要css和js结合才能实现了:<div style="position:

<div><img src="1.jpg"></div> 如上面的列子:比如div的宽高度分别为300px 200px;而图片的宽高度为400px 300px;这样图片比div要大 css:div{ width:300px; height:200px; overflow:hidden} div>img{ width:400px; height:300px; margin:auto;}

<html><head></head><body><div id="test" style="width:100px; height:140px; overflow:hidden; text-align:right"><img src=" http://cache.soso.com/wenwen/i/w_logo.png" style="float:right; margin-left:-90px;" /></div> </body></html>

像你这么说,貌似只有用js来判断了,首先给图片上下左右居中,给父级元素设置overflow:hidden; 然后用过js来获取当前图片的宽高,如果宽度大于高度,那么就高度为100%,宽度自适应,反之宽度100%,高度自适应;

#component设置固定的宽高;放图片的div #component 设置overflow:hidden;

给图片一个样式:看一下你图片的宽高,然后给它这个值,这样超出部分也会完整显示出来,如果你怕影响下面内容的样式,可以用position:absolute来绝对定位,通过margin值来选择定位的位置,这样就不会影响下面内容的排版了

你给图片外面加个div,然后在css中加上overflow:hide; width:500px; 这样的话图片如果大于500就隐藏了

给背景图片加个宽和高的属性就好“background-size:”例如:<div style="background-image:url(/img/1.jpg); width: 100px; height: 100px; background-size: 100px 100px;"></div>你表格有多宽和高,就给背景图设个高和宽就好,或者设置background-size:100% 100%;

1,你可以裁剪原图片到你想要的样子就行了2,你可以设置div的大小,然后给他加上属性overflow:hidden,就是溢出的隐藏.3,设置文字区域为div然后覆盖掉一部分图片区域 望采纳.

用一个DIV把图片包起来

网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com