图像流出div

Question

我正在尝试实现从 div 中流出的图像。基本上，在我的标题中，我的固定宽度为 960 像素，徽标图像有一些东西从其中脱落，我想将其放置在 960 像素之外。

有没有一种很好的干净方法来实现这一目标？

Answer 1

执行此操作的简单方法（适用于大多数浏览器）是让主包装器具有 position:relative ，并使 div（您想要向外流动的）具有 位置：绝对；左：-25px；顶部：-25px；。

将 position:relative 作为包装器使得 position:absolute 在父容器内相对。

Answer 2

将您的徽标放在固定 div 中，并为该 div 指定样式 overflow:hidden

Answer 3

您也可以通过绝对定位来实现这一点。下面是简单的示例：

http://jsfiddle.net/spacebeers/9QJ4w/1/

Answer 4

您可以使用 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/

Answer 5

你的朋友将会溢出：可见。

您的包含 div 将具有 960px 宽度，并且溢出：可见。在内部，您将有一个相对或绝对定位的图像（您需要向“左”偏移以使其居中）

Answer 6

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

Answer 7

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

试试这个：

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