How to resize div to a child image size?
10:30 06 Sep 2020

I am making an image viewer in my web site and currently stuck with one particular issue.

How can I resize parent div to a child image size? I made an example of the problem https://jsfiddle.net/hf0ca2z1/19/

* {
  box-sizing: border-box;
}

body {
  background-color: tomato;
}

.picture-viewer {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 20;
  top: 0px;
  justify-content: center;
  align-items: center;
}

.picture-viewer-frame {
  position: relative;
  display: flex;
  width: 85%;
  height: 85%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
}

.picture-viewer-frame img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.35);
}

.picture-viewer-frame-header {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 65px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  align-items: center;
  padding-left: 15px;
}

  

    
    
    

      Header Text

The image is responsive to the screen size, so that it would look proper on any device / screen and I want the image parent div element to resize to the size of the image. How can I achieve that?

I suppose I have to resize the div and then make an image the size of the div, but how do I resize the div to the image size? Also there could be any image with any kind of dimensions.

javascript html css