Reputation:
This is currently what i'm facing:
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
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
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
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