网站图片看起来比它们小

Question

在我们的Joomla 2.5网站上的图片中 http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits 在Firefox中正确显示但在Chrome中是缩略图 这是为什么？ 检查后端的图像尺寸是否正确

Answer 1

问题出现在我目前手边的所有基于WebKit的浏览器中，即Chrome（Win / OSX / IOS）和Safari（桌面和移动） 在bootstrap.css中，您会注意到这一点：

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

特别是max-width: 100% - 我想你会发现，因为它被设置为容器的100％（在这种情况下是周围的<td></td>），问题在于{{1的宽度列。

考虑到max-width percentages are used to calculate the width from the size of the containing block，而不是他们附加到WebKit浏览器的元素正在做正确的事情而Firefox显然不是（任何有更好洞察力的人都请在这里加入）。

您可以通过指定第一个<table>的{​​{1}}来解决此问题：

width

或者更好的方法是not use tables for layout，因为这不是他们的意思。

详细了解如何使用here和here。