CODEWITHSUNDEEP
cssimageoverflowcontain
babybackart
babybackart

Reputation: 33

Make a .div act like an image

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 and the attribute "text-align: center" (thank you IE).

See it there: http://codepen.io/babybackart/pen/vGQeoK

html:

<body>
   <div class="plancheBox">
      <div class="strut"></div><!--
      --><img src="http://images.forwallpaper.com/files/thumbs/preview/23/236747__kitten-soft-fluffy-tender_p.jpg">
   </div>
</body>

css:

body{
   height: 100%;
   width: 100%;
   display: block;
   text-align:center;
}

h1, h2{
   font-family: Arial, sans serif;
   font-weight: 300;
   color: white;
}

.plancheBox{
   background-color: green;
   position: absolute;
   display: block;
   width: 90%;
   height: 90%;
   vertical-align: middle;
}

.strut {
   height:100%;
   display:inline-block;
   vertical-align:middle;
}

.plancheBox img{
   max-height: 100%;
   max-width: 100%;
   vertical-align:middle;
}

I wanted to add a text on the image so I put the image and a text-box in a bloc (the text-box is absolute to appear in front of the image).

See it there: http://codepen.io/babybackart/pen/BKGwZL

html:

<body>
  <div class="plancheBox">
    <div class="strut"></div><!--
    --><div class="container">
          <img src="http://eskipaper.com/images/photo-cat-1.jpg">
          <div class="descriptionBox">
             <h1>Joe le chat</h1>
             <h2>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur.</h2>
          </div>
       </div>
  </div>
</body>

css:

body{
  height: 100%;
  width: 100%;
  display: block;
  text-align:center;
}

h1, h2{
  font-family: Arial, sans serif;
  font-weight: 300;
  color: white;
}

.plancheBox{
  background-color: green;
  position: absolute;
  display: block;
  width: 90%;
  height: 90%;
  vertical-align: middle;
}

.strut {
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

.container{
  max-height: 100%;
  max-width: 100%;
  display:inline-block;
  vertical-align:middle;
}

.container img{
  max-height: 100%;
  max-width: 100%;
  display:inline-block;
  vertical-align:middle;
}

.descriptionBox{
  background-color: blue;
  position: absolute;
  width: 60%;
  margin: 0 20% 5% 20%;
  bottom: 0;
}

The problem is that my .div ".container" doesn't act like my image in the first example, it overflows on the bottom when the windows' height is small.

Main question: Is there a way to make the ".container" act like the image in the first example ?

Extra-question: How to fix the ratio and the size of the text-box with the size of the image?

Thank you by advance for your answers !

Upvotes: 1

Views: 3148

Answers (2)

Seika85
Seika85

Reputation: 2021

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();
});

Upvotes: 2

eye-wonder
eye-wonder

Reputation: 1193

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

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

Upvotes: 0

Related Questions