html - CSS 图像百分比表现异常

Question

我希望我的 CSS 样式在某处不是冲突，但是在我的页面（http://www.marioplanet.com/product.htm）上，我正在尝试将 CSS 规则应用于所有具有FancyBox缩小它们的类的图像从25%他们原来的大小。

现在，我听说这可能只适用于包含表格单元格，所以请告诉我是否是这种情况。

此外，如果上述情况属实，那么我是否可以只使用纯 CSS 和 HTML 而没有 JavaScript 来做到这一点？

谢谢！

Answer 1

不幸的是，width:25%;这将导致宽度为容器大小的四分之一，而不是原始元素大小。

我认为，最好的选择是确定您想要的尺寸并以像素为单位提供它们。

Answer 2

如果以百分比指定宽度，则此宽度将根据父元素的宽度计算，此处为 a <td/>。所以你得到的结果是相当预期的。

现在，如果您想将图像大小调整为 25%，您有两种方法可以做到这一点：

• 获取服务器端的宽度，将其除以 4 并在 HTML 中设置。这是一个简单但非常糟糕的解决方案（请参阅更多信息）。
• 通过将图像缩放到 ¼ 来调整服务器端的图像大小，然后发送调整后的图像。

第二种解决方案要好得多，因为没有理由让用户等待四倍以上才能看到图像（以及花费带宽和服务器性能）。顺便说一句，由于您将存储缩放后的图像，因此调整大小时服务器不会过热。

Answer 3

简单宽度：75%；还不够吗？

.fancybox{ 宽度：75%; }