fit image to div according to its width and height

Question

I am trying to fit image into div. But somehow image is not fitting. Take a look at div called as node2

I have put below properties to image

img {
   max-width: 100%;
   max-height: 100%;

}

Here is my Fiddle

Answer 1

Instead of using max height and width, try using regular:

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

I also noticed in your fiddle, under CSS you had the following:

object-fit: contain;

You need to remove this as well.

Both of which will stretch the image both vertically and horizontally across the whole of the div.

Answer 2

I think you need this:

img {
  float: left;
  object-fit: fill;
  width: 100%;
}

and if you do not want to strecth your image then please add following css also:

#node2 {
  height: auto;
  width: 255px;
}

Please find fiddle demo here.

Answer 3

if you want it 100% x 100% then, do it as background image of your div:

div{
    background-image: url('../images/yourimage.jpg');
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
}