Facebook 喜欢的盒子图像失真答案

【问题标题】：Facebook like box images distortedFacebook 喜欢的盒子图像失真
【发布时间】：2012-09-09 08:21:55
【问题描述】：

我在我的网站上使用 FB like box 小部件。我注意到在 FB 上发布的较大图像在框中出现失真。

我看到负责这个的 css 是：

.uiScaledImageContainer img {
    height: 100%;
    min-height: 100%;
 }

有没有办法可以在我的 CSS 中强制使用 height: auto？显然，我在样式表中为此元素声明的任何内容都会被忽略，即使使用 !important。

【问题讨论】：

标签： image height facebook-likebox distortion

【解决方案1】：

您无法在 Facebook 的 iFrame 中编辑 CSS。我遇到了同样的问题，但是还有一段代码用“height：auto”覆盖了“height:100%”，我得到了相同的结果。如果我将最小高度更改为“自动”，它似乎可以修复它。

原代码为：

.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;

和

.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;

现在我们只需要有人来更新 facebook 的 likebox.php。令人惊讶的是，IE 是唯一没有问题的浏览器。并且由于某种原因，firefox 并没有完全加载应用程序......

【讨论】：

【解决方案2】：

由于到目前为止没有任何改变，这里有一些我发现的关于这个问题的更多细节：

它只出现在相册中的图片上，而不是单张图片上在帖子中上传的图片。
在我看来，它出现在 chrome 浏览器和 iphone 和 android 设备上，而不是在 firefox 和互联网浏览器。

也许这有帮助。

【讨论】：