Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Any CSS experts have a clue why this works fine in Firefox and latest Chrome, but NOT in Safari??
In Safari, as I reduce the width of the browser, the image scales horizontally, but not vertically and becomes ‘squished’.
width: 100%;
max-width: 560px;
height: 100%;
max-height: 490px;
I think what you want is
height: auto;instead ofheight: 100%;. That way the height of the image will automatically be proportionate to the width based on its natural dimensions, even as the width changes.Tested in Safari, Firefox and Chrome. Here’s my fiddle: http://jsfiddle.net/qLqr9/1/