将图像拉到其<div>之外的中间位置

Question

我已经看到一些新闻网站（现在似乎无法找到链接），当@media在某处时，会将图片 50％排在之外 （最小宽度：1200px）。

我知道如何使用最大宽度拉出图像的唯一方法是使用

position:absolute;
left: -100px;

然而，文本无法环绕这个（图像叠加在文本顶部），它也不能将图像精确地拉到50％。这可以用css / html与父母中的图像一起完成吗？

Answer 1

＆＃13;

＆＃13;

div {
  position: relative;
  height: 200px;
}

img {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;