CODEWITHSUNDEEP
htmlcss
TJ15
TJ15

Reputation: 363

100% width on an absolute positioned image

I have a div that is 50% the width of the screen and 100% height.

I want to have an image placed at the bottom of the div that will adjust with the width.

To set the position I use position: absolute; but this removed the auto width:

code: 

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>

Is there any way to have an image positioned absolute and adjust to container width?

Upvotes: 2

Views: 14126

Answers (5)

Marc Audet
Marc Audet

Reputation: 46775

Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.

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>

Upvotes: 4

Arkenia
Arkenia

Reputation: 71

You can also try this:

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

Upvotes: 1

Jordumus
Jordumus

Reputation: 2783

You could try this:

.aaaaa {
position: relative;
}

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

https://jsfiddle.net/1oxy7odv/

Upvotes: 1

Doml The-Bread
Doml The-Bread

Reputation: 1771

you could use another positioning for your bottomImage to size with its parent container:

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

Upvotes: 1

Waxi
Waxi

Reputation: 1651

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

Upvotes: 1

Related Questions