Question

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

我希望在div的底部放置一个图像，该图像将根据宽度进行调整。

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

代码：

＆＃13;

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;
}

＆＃13;

<div id="full-size" class="clearfix">

  <div id="aaaaa">
    <img class="bottomImage" src="events_bottom.png" />
  </div>


</div>

＆＃13;

有没有办法让图像绝对定位并调整到容器宽度？

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

<强> 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;}

Answer 3

你可以使用另一个定位来使你的bottomImage与其父容器一起调整大小：

.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;
}

Answer 4

你可以试试这个：

.aaaaa {
position: relative;
}

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

https://jsfiddle.net/1oxy7odv/

Answer 5

你也可以试试这个：

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

绝对定位图像上的宽度为100％

5 个答案: