响应式网站图片问题 [英] Responsive site image issues
问题描述
如果你看看这个网站： http://cornerstonecastings.com
这是我的第一个响应网站之一，它是用Wordpress构建的。我遇到的问题是网站上图片的响应。如果您调整浏览器的大小（我使用的是最新的Chrome浏览器），则图像会相应地调整和缩小，因为它们应该是这样。但是当从我的iPhone的Safari（或Chrome iOS）查看网站时，图像水平调整，但是它们拉伸并垂直扭曲。为什么会这样？
编辑：
我的桌面上的Safari，并发生同样的垂直拉伸，告诉我，这不是移动Safari特有的。为什么图像在Chrome中运行良好，但不是Safari？
这是 height：100％导致这种情况发生的。为了使图像按比例缩放，他们需要一个高度值 auto 。
您的style.css中的选择器位于第468行左右。更改身高：
div.main-content img {
height：auto; / *添加！重要的是如果高度设置内联在图像上* /
}
为什么这发生在Safari中，而不是在Chrome中;我不确定，但我注意到Chrome经常接受CSS中的错误，并将它们转换为正确的。我猜这是定期使用的一个不错的功能，但它让我不喜欢在Chrome中开发，因为我可能会错过一些破坏其他浏览器布局的小错误。
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?
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.
这篇关于响应式网站图片问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
