CODEWITHSUNDEEP
htmlcssresponsive-design
Roi
Roi

Reputation: 1647

CSS image height auto causing incorrect aspect ratio

Very strange issue I am running into here...

I have an image with dimensions: 570x400. I'm have this build responsive, so in order to scale the image down I am using: img {max-width:100%; height:auto;}

This works great... however when I reach the max size, for some reason the image is being displayed at: 570x406. It's like improperly calculating the aspect ratio.

Here is the site i am working on: http://www.juliancaustrita.com/

Has anyone encountered this before? I have built many sites using the "max-width 100%; height:auto" and have never seen this before....

Thanks!

Upvotes: 1

Views: 549

Answers (2)

jingtao
jingtao

Reputation: 513

CSS widths include padding and borders. The class .img-frame which you've applied on the images give them a border of 10px.

This screenshot of Chrome's element inspector might make things clearer:

enter image description here

Upvotes: 1

Henrik
Henrik

Reputation: 4034

It is because of the 10px white border you are applying to the .img-frame.

Upvotes: 1

Related Questions