CODEWITHSUNDEEP
cssimagesize
user4607502
user4607502

Reputation:

Make Image fit inside of rectangle div?

This is currently what i'm facing: Image Doesn't Fit Height-Wise

The image fits fine with the width, but the height doesn't fit. I don't want the image to look squashed. Is there any way to bring it together and scale it correctly it still fits?

This is my css:

.body-container .main-container .picture .selected {
    height:550px;
    width:740px;
    background-size:cover;
    background:url("../images/case/5.jpg");
}

Upvotes: 0

Views: 1756

Answers (3)

SayMaxil
SayMaxil

Reputation: 27

Try this 

.body-container .main-container .picture .selected {
   height:100%;
   width:100%;
   background-size:cover;
   background:url("../images/case/5.jpg");
}

Upvotes: 0

Plam
Plam

Reputation: 379

From personal experience with Photoshop and web development. If an image is for example a certain size lets say 550 x 750 pixels. You want to keep that ratio exactly the same or else you will squish the image. The only way to have it fit is to actually open up the image inside Photoshop and adjust it there. Then use that new image in your website.

Also try using percents instead of pixels because percents scale down together. You really have to mess around with the picture and eye ball it until it looks the way you really want it to look.

Upvotes: 0

HTMLNoob
HTMLNoob

Reputation: 821

You can use the background-size property. This will allow you to customize the height and width of the background-image to your liking. 

#some-id {
  background-image: url("someRandomImage");
  background-size: 80px/*WIDTH*/60px/*HEIGHT*/;
  }

Upvotes: 0

Related Questions