html - 绝对定位图像上的 100% 宽度

Question

我有一个 div，它是屏幕宽度的 50% 和高度的 100%。

我想在 div 的底部放置一个图像，该图像将随宽度调整。

要设置位置，我使用 position: absolute;但这删除了自动宽度:

代码:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#full-size {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#aaaaa {
  width: 50%;
  height: 100%;
  background: #0F0;
  float: left;
}

.bottomImage {
  width: auto !important;
  width: 100%;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  width: auto;
}

<div id="full-size" class="clearfix">

  <div id="aaaaa">
    <img class="bottomImage" src="events_bottom.png" />
  </div>


</div>

有什么方法可以让图像绝对定位并调整到容器宽度？

Answer 1

将 position: relative 添加到 #aaaaa 允许根据 #aaaaa block 的宽度和位置计算图像宽度和偏移量.

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#full-size {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#aaaaa {
  width: 50%;
  height: 100%;
  background: #0F0;
  float: left;
  position: relative;
}
.bottomImage {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
}

<div id="full-size" class="clearfix">
  <div id="aaaaa">
    <img class="bottomImage" src="http://placehold.it/300x50" />
  </div>
</div>