我正在尝试实现一个从div中流出的图像。基本上,在我的标题我有一个固定的宽度960px,标志图像有一些东西来了,我想坐在外面的960px。有没有一个很好的清洁方法来实现这一点?
cbeh67ev1#
简单的方法(在大多数浏览器中都有效)是让你的主 Package 器有position:relative,让div(你想流到外面)有position: absolute; left: -25px; top: -25px;。使用position:relative作为 Package 器使position:absolute相对于父容器。
position:relative
position: absolute; left: -25px; top: -25px;
position:absolute
cpjpxq1n2#
把你的标志放在固定的div中,并给予那个div一个样式overflow:hidden
overflow:hidden
ars1skjm3#
你也可以绝对定位来实现这一点。下面是一个简单的例子:http://jsfiddle.net/spacebeers/9QJ4w/1/
y3bcpkx14#
你可以使用CSS的position属性来实现这一点:HTML:
position
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div { width: 100%; height: 175px; } div p { width: 960px; margin: 0 auto; background-color: #333; height: 175px; text-indent: 20px; } div img { position: relative; right: 140px; }
http://jsfiddle.net/FpTDc/
7tofc5zh5#
你的朋友会溢出来:可见。您的包含div将具有960px宽度,并带有overflow:visible。在里面,你将有一个相对或绝对定位的图像(你将需要偏移'左'中心它)
ljo96ir56#
<div> <img src="" /> </div> div { width:300px; height:100px; background:red; margin:100px; } img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
代码:http://jsfiddle.net/cSQrR/
xqk2d5yq7#
这是由于图像具有不同的尺寸和纵横比。试试这个:
img { width: 100%; height: 100%; object-fit: cover; }
7条答案
按热度按时间cbeh67ev1#
简单的方法(在大多数浏览器中都有效)是让你的主 Package 器有
position:relative
,让div(你想流到外面)有position: absolute; left: -25px; top: -25px;
。使用
position:relative
作为 Package 器使position:absolute
相对于父容器。cpjpxq1n2#
把你的标志放在固定的div中,并给予那个div一个样式
overflow:hidden
ars1skjm3#
你也可以绝对定位来实现这一点。下面是一个简单的例子:
http://jsfiddle.net/spacebeers/9QJ4w/1/
y3bcpkx14#
你可以使用CSS的
position
属性来实现这一点:HTML:
CSS:
http://jsfiddle.net/FpTDc/
7tofc5zh5#
你的朋友会溢出来:可见。
您的包含div将具有960px宽度,并带有overflow:visible。在里面,你将有一个相对或绝对定位的图像(你将需要偏移'左'中心它)
ljo96ir56#
代码:http://jsfiddle.net/cSQrR/
xqk2d5yq7#
这是由于图像具有不同的尺寸和纵横比。
试试这个: