css 图像流出div

vfwfrxfs  于 2023-05-08  发布在  其他
关注(0)|答案(7)|浏览(121)

我正在尝试实现一个从div中流出的图像。基本上,在我的标题我有一个固定的宽度960px,标志图像有一些东西来了,我想坐在外面的960px。
有没有一个很好的清洁方法来实现这一点?

cbeh67ev

cbeh67ev1#

简单的方法(在大多数浏览器中都有效)是让你的主 Package 器有position:relative,让div(你想流到外面)有position: absolute; left: -25px; top: -25px;
使用position:relative作为 Package 器使position:absolute相对于父容器。

cpjpxq1n

cpjpxq1n2#

把你的标志放在固定的div中,并给予那个div一个样式overflow:hidden

ars1skjm

ars1skjm3#

你也可以绝对定位来实现这一点。下面是一个简单的例子:
http://jsfiddle.net/spacebeers/9QJ4w/1/

y3bcpkx1

y3bcpkx14#

你可以使用CSS的position属性来实现这一点:
HTML:

<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/

7tofc5zh

7tofc5zh5#

你的朋友会溢出来:可见。
您的包含div将具有960px宽度,并带有overflow:visible。在里面,你将有一个相对或绝对定位的图像(你将需要偏移'左'中心它)

ljo96ir5

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/

xqk2d5yq

xqk2d5yq7#

这是由于图像具有不同的尺寸和纵横比。
试试这个:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

相关问题