CODEWITHSUNDEEP
htmlcssimage
James
James

Reputation: 1945

fit image to div according to its width and height

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

Upvotes: 0

Views: 486

Answers (3)

Jainam
Jainam

Reputation: 2660

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.

Upvotes: 1

Juan Fernandez Ridano
Juan Fernandez Ridano

Reputation: 31

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

Upvotes: 0

James
James

Reputation: 1501

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.

Upvotes: 1

Related Questions