Make a .Div Act Like an Image

Make a .div act like an image

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

Contain an image within a div?

Use max width and max height. It will keep the aspect ratio

#container img 
{
 max-width: 250px;
 max-height: 250px;
}

http://jsfiddle.net/rV77g/

How to put an image in div with CSS?

This answer by Jaap :

<div class="image"></div>​

and in CSS :

div.image::before {
   content:url(http://placehold.it/350x150);
}​

you can try it on this link :
http://jsfiddle.net/XAh2d/

this is a link about css content
http://css-tricks.com/css-content/

This has been tested on Chrome, firefox and Safari. (I'm on a mac, so if someone has the result on IE, tell me to add it)

How do I fit an image (img) inside a div and keep the aspect ratio?

You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

If you use a JavaScript Library you might want to take advantage of it.

can't get image to fit inside a div

You can do it like this

.item img {
width: 100%;
height:100%;
}

Display image inside a div tag behind that div tag

You can try this.

HTML

<div id="root">
   <div id="square"></div>
   <img src="https://placehold.it/100x100.png" alt="Image"/>
</div>

CSS

#square {
   width: 70%;
   margin: 100px auto;
   border-radius: 5px;
   background-color: #000;
   box-shadow: 0 5px 15px rgb(150, 150, 150);
   padding-top: 150px;
   padding-bottom: 150px;
   position: relative;
   z-index: 2;
}

#root > img {
   width: 80px;
   position: absolute;
   top: 15%;
   left: 10%;
   z-index: 1;
}

How to center image horizontally within a div element?

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

CSS class IMG inside div and span

First of all you cannot start a class name using a digit, I assume that it's generating from somewhere as the classes are empty, but if you can, than consider changing it, like

class="name_123_test"

And use the selector below like

.name_123_test > span img {
   /* Styles goes here */
}

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit. Identifiers can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

W3C Reference

---

Related Topics