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

TJ15

我的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>

有什么方法可以将图像绝对定位并调整为容器宽度?

约多姆斯

您可以尝试以下方法:

.aaaaa {
position: relative;
}

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

https://jsfiddle.net/1oxy7odv/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档