CODEWITHSUNDEEP
htmlcssimage
Feđa
Feđa

Reputation: 49

Img to fit the div using css without stretching

I have an issue with css. I have to fit an image of variable size to a div with 100% width and 96vh. Also it should look good on resizing of the browser. I tried some tricks, but the result isn't good at all. Here is an example: http://dev.tourday.co/tour/Test-Emir-tour/45. The image looks really zoomed in on a 1366x768 resolution.

In this case I would like to get the result like when its completely zoomed out (something like this http://pokit.org/get/img/4445922ec2a29994b530d45759003d67.jpg).

I'm okay with the sides being cut out a bit because the aspect ratio of the picture is different than the div's, but I'd really like to avoid stretching.

Tried messing around with width:100%, and height:100%, but then stretching accours. What am I missing here?

Upvotes: 0

Views: 843

Answers (1)

Johannes
Johannes

Reputation: 67814

if you define the image as a background image for its container, you can use background-size: cover . This will cut off some parts (depending on the window proportions), but fill the whole container and not distort the image proportions. Adding background-position: centermakes sure the middle part is always shown.

Upvotes: 1

Related Questions