Make a .div act like an image

Question

I have a question about the display of a container.

First, I managed to simulate the attribute \"object-fit: contain;\" for an image by using a verticaly alligned strut

Answer 1

You try to size the container according to it's content and the content according to it's parent at the same time. This does not work. One of it needs to have set some dimensions. According to your examples it's the image, that should be fit into an container, so I dimension the container and let the image be sized according to it.

CSS:

.container {
    height: 100%; /* not max-height */
    width: 100%; /* not max-width */
    overflow: hidden;
    position: relative;
}
.container img {
    max-height: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
    max-width: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The position: absolute is needed to "fit" the image inside your container an position it at the same time. The 50% moves the top-left border of the image to the center of the container, and the transform moves the image by half its width and height back - so it's centered.

---

Since the above is outdated as per the more information provided by the OP. You'd need additional JS for that:

JS:

$('.plancheBox img').each( function() {

  var $img = $(this),
      $plancheBox = $img.closest('.plancheBox');

  $img.css({
    'max-height' : $plancheBox.height(),
    'max-width'  : $plancheBox.width()
  });

  $img.closest('.container').css({'position' : 'relative'});

});

CSS:

[...]

.container{
  display: table;
  margin: 0 auto;
  position: absolute;
}

.container img{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.descriptionBox{
  background-color: blue;
  position: absolute;
  bottom: 5%;
  right: 20%;
  left: 20%;
}

[...]

example fiddle: jsfiddle.net/jpu8umd6/2

---

In case a portrait plancheBox is possible: jsfiddle.net/jpu8umd6/3

---

When resizing the browser should be considered by JS, add an event handler, that resets the css-changes and calculate the needed values again.
See: jsfiddle.net/jpu8umd6/4

JS:

// calculateImageDimension() contains the JS described above

var resizeEnd;
$(window).on('resize', function() {
  clearTimeout(resizeEnd);
  resizeEnd = setTimeout(function() {
    $(window).trigger('resize-end');
  }, 200);
});

$(window).on('resize-end', function() {

    $('.plancheBox img').css({
    'max-height' : 'none',
    'max-width'  : 'none'
  })
  $('.plancheBox .container').css({'position' : ''});

  calculateImageDimension();
});

Answer 2

Since .descriptionBox has position: absolute; the (surrounding) .container should probably have position:relative;

https://codepen.io/eye-wonder/pen/EKGPmZ