Use position in CSS and calculate height

1
votes

I've set img width 100%, so I don't know height of the img. I'm trying to set a div at the end of img using position absolute and top. Can we use calc() ? Or another method.

Note: I've set img position fixed.

<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>

<div class="to-image-bottom">I'm div at the bottom of image</div>
1
htmlcsscss-position
Short answer: yes, you can do this using css, but only if you know the width/height ratio of the image. – Luuuud
How do I know the ratio? – user12054439

1 Answers

0
votes

You can use bottom instead of top for positioning elements. Also use wrapper for bottom div for display it outside of image. For example:

/* Container for image and bottom div */
.container{
  position: relative;
  /* For display content outside of image */
  overflow: visible;
}

/* Image Styles */
.container .image{
  width: 100%;
}

/* Wrapper for bottom div for align to bottom */
.container .to-image-bottom-wrapper{
  position: absolute;
  width: 100%;
  bottom: 0;
}

/* Bottom Div */
.container .to-image-bottom-wrapper .to-image-bottom{
  position: absolute;
  top: 0; /* position relative to wrapper */
  width: 100%;
  background: red;
  color: white;
  text-align: center;
}
<div class="container">
    <img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
    <div class="to-image-bottom-wrapper">
      <div class="to-image-bottom">I'm div at the bottom of image</div>
    </div>
</div>

Edited for displaying div outside of image