设置 Fancybox 图像大小

Question

我有一个 Fancybox 画廊，它使用以下 html 将一张图片的链接加载到一个包含另外 4 张图片的画廊：

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

href 图像是显示的大图，src 图像是缩略图。我知道如何在用于调用 fancybox 的 javascript 中设置缩略图大小：

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

但是我不知道如何更改显示图像的大小。这样做更好吗

1/ 根据缩略图在 javascript 中。

2/ 在 CSS 中（如果是这样，我如何链接到这个特定的图像？）

3/ 在实际图像文件到达网页之前，只需将其设置为正确的大小，这样网页就可以不加修改地显示它。

在上述这些方法中，一般来说，哪种方法是最佳实践，而不仅仅是 Fancybox？我从来没有真正理解网页中的图像大小 - 但我认为如果 CSS 或 javascript 要调整图像大小，则必须加载整个（有时非常大）文件大小然后调整大小，而如果图像更小开始它会是一个更小，更快的下载。对吗？？

Answer 1

数字 3 是要走的路，假设您没有做一些疯狂的服务器端预处理来实现它。如果您知道您的图片将为 75x75，请将它们保存为 75x75 的图片。

如果上述情况不适用，我个人更喜欢 CSS：在设置大小之前，您不必等待 DOM 对象准备好，并且客户端调试会更容易一些。

.gallery .fancybox1 img
{
    width: 75px;
    height: 75px;
}

您对图像大小的所有假设都是绝对正确的。您还需要处理跨浏览器的图像缩放不一致问题。理想的解决方案是只显示与原始图像完全相同的大小。当然，这并不总是可能/现实的（流畅的布局设计等）。

不过，在这一点上。让它发挥作用，把所有东西都拿出来，然后再优化。除非您在healthcare.gov 上工作，否则这根本不是正确的方法；)