How to auto resize father div based on child (image) size with set ```max-height`` and ```object-fit: cover;```

This is just an example code. I don't know how to limit the picture height and still have responsive #pictureContainer with object-fit: cover. Is there a more simple way to write this code. Any help would be appreciated.

html,
body {
  padding: 0px;
  margin: 0px;
}

#pictureContainer {
  height: auto;
  /*max-height: 100% <-- doesn't work */
  position: relative;
}

.picture {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
}

<div id="pictureContainer">
  <img class="picture" src="https://media.istockphoto.com/photos/brown-two-story-all-american-home-picture-id1158713117?k=20&m=1158713117&s=612x612&w=0&h=s_aoDM4KNoixI9qBLmJOBPMccoWsC11zxuBGGgFRiKY=">
</div>

How to auto resize father div based on child (image) size with set ```max-height`` and ```object-fit: cover;```

0 Answers