将图像拉到其<div>外部的一半

Question

我已经看到了一些新闻网站（虽然现在似乎找不到链接），这些网站在 @ @ @ @ @ @ @ @ @ @ @媒体在某个地方（最小宽度：1200px）。

我知道如何通过使用

将图像拉出的唯一方法

position:absolute;
left: -100px;

但是，文本无法绕过它（文本顶部的图像叠加），也不能准确地将图像恰好拉动图像。可以用父母内部的图像使用CSS/HTML来完成？

Answer 1

div {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div style="border: 1px solid red; width: 100%">
  <img src="http://smalldata.io/startup/common-files/icons/sdl_logo.png" alt="">
</div>