html - 以不同的方式设置图像，超出div

这就是我所拥有的：

我希望它是：

程式码片段：

.test0 {
  float: left;
  width: 0%;
  height: 100px;
}

<div class="test0">
  <img src="../arrow.png" height="30px" width="100px">
</div>

真的整天都无法解决。

最佳答案

您可以使用定位来实现。您需要使父div是相对的，子必须具有绝对位置。

见Codepen

的CSS

.test0 {
  position: relative;
  float: left;
  width: 0%;
  height: 100px;
}
.test0 img {
  position: absolute;
  left: -20px;
}