问题
If you take a look at the site: http://cornerstonecastings.com
It's one of my first responsive sites, and it's built with Wordpress. The problem I'm having is with the responsiveness of the images on the site. If you resize your browser (I'm using the latest Chrome) the images will adjust and shrink accordingly, as they're supposed to. But when viewing the site from my iPhone's Safari (or Chrome iOS for that matter) the images adjust horizontally, but they stretch and get distorted vertically. Why is that?
Edit:
I viewed the site in the latest Safari on my desktop, and the same vertical stretching happens, telling me that this isn't mobile Safari-specific. Why do the images work well in Chrome, but not Safari?
回答1:
It's the height: 100% that causes this to happen. To make images scale proportionally they need a height value of auto.
The selector is found around row 468 in your style.css. Change the height:
div.main-content img {
height: auto; /* add !important if height is set inline on the image */
}
As for why this happens in Safari but not in Chrome; I don't know for sure, but I've noticed Chrome often accepts mistakes in CSS and converts them to look correct. I guess it's a nice feature for regular use but it makes me dislike developing in Chrome since I might miss some minor mistake which breaks the layout in other browsers.
来源：https://stackoverflow.com/questions/16880150/responsive-site-image-issues