绝对定位图像上的 100% 宽度答案

【问题标题】：100% width on an absolute positioned image绝对定位图像上的 100% 宽度
【发布时间】：2015-05-21 07:38:36
【问题描述】：

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

我想在 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>

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

【问题讨论】：

它可能无助于您尝试声明宽度 3 次...
这不会改变任何事情
感谢大家的回复！位置：相对于父母，左右为我完成。

标签： html css

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

你可以试试这个：

.aaaaa {
position: relative;
}

.bottomImage {    
position: absolute;
left: 0;
right: 0;
}

https://jsfiddle.net/1oxy7odv/

【讨论】：

【解决方案3】：

HTML

<div>
    <img />
</div>

CSS

div {
    display: block;
    position: relative;
    width: 500px;
    height: 500px;
    background: black;
    margin: 50px auto;}

img {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: red;
    height: 25px;}

【讨论】：

【解决方案4】：

您可以为您的底部图像使用另一个定位来调整其父容器的大小：

.bottomImage {
    position: absolute;
    top: 0; //or whatever position from top
    left: 0;
    right: 0; //important !!! this way its always on the rightest(?) position of the parent)
    bottom: 0;
}

【讨论】：

【解决方案5】：

你也可以试试这个：

.bottomImage {
    width: inherit; /*inherits width from div.aaaaa*/
    max-width: 100%;
    position:absolute;
    bottom:0;
}

【讨论】：