CODEWITHSUNDEEP
htmlcssimage
hossein ketabi
hossein ketabi

Reputation: 510

set parent height based on his child image height

I have a div that with an image in it

#slideshow {
  line-height: 1;
  position: relative;
  /*height: 125px;*/
  /*width: 100vw;*/
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 5px;
  margin-top: 10px;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
  font-size: 15vw;
  text-align: center;
  color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}
<div id="slideshow">
  <img alt="c" class="rectangle__image" src="/assets/media/ads-images/shad_NiOyJ1U.png">
</div>

I don't want to manually set the height of the image's parent; the height of the parent container should be contingent on the height of the image, but when I write the page this way, the image fails to display.

Upvotes: 1

Views: 629

Answers (1)

TechySharnav
TechySharnav

Reputation: 5084

You need to remove position: absolute; from the img since absolute positioning removes the element from document's flow. Also you had set opacity to 0.

#slideshow {
  line-height: 1;
  position: relative;
  /*height: 125px;*/
  /*width: 100vw;*/
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 5px;
  margin-top: 10px;
}

#slideshow img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  opacity: 1;
  font-size: 15vw;
  text-align: center;
  color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}
<div id="slideshow">
  <img alt="c" class="rectangle__image" src="https://source.unsplash.com/random">
</div>

Pen Link - https://codepen.io/techysharnav/pen/RwpByxW

Upvotes: 1

Related Questions