Javascript 设置Fancybox图像大小

我有一个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>

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

1/根据缩略图在javascript中输入

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

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

---

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

第3条是正确的选择，假设您没有进行疯狂的服务器端预处理来实现它。如果您知道您的图像将是75x75，请将其另存为75x75图像

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

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

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

---

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

第3条是一条路，假设你没有做一些疯狂的服务器端预处理来实现它。如果您知道您的图像将是75x75，请将其另存为75x75图像

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

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

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

---

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

(一)。你不需要在隐藏的

div

中有缩略图，这只会增加页面加载的开销，所以

就足够了（对于隐藏的链接）。显示的图像（在fancybox中）只能以两种格式显示：a）。调整大小以适合查看端口（选项

fitToView:true

（默认））或其原始大小（选项

fitToView:false

）@JFK我接受您关于隐藏缩略图的观点-这是一个复制粘贴作业，客户端尚未决定要将哪个作为主图像！很高兴了解FitView：选项。。。虽然如果设置为true，例如三个图像分别为800x600、600x800和150x150，它如何处理此问题？我假设如果图像比视口小，它不会放大，只是显示得更小，如果其中一个尺寸更大，它会缩小整个图像以适应它，但保持纵横比（1）。你不需要在隐藏的

div

中有缩略图，这只会增加页面加载的开销，所以

就足够了（对于隐藏的链接）。显示的图像（在fancybox中）只能以两种格式显示：a）。调整大小以适合查看端口（选项

fitToView:true

（默认））或其原始大小（选项

fitToView:false

）@JFK我接受您关于隐藏缩略图的观点-这是一个复制粘贴作业，客户端尚未决定要将哪个作为主图像！很高兴了解FitView：选项。。。虽然如果设置为true，例如三个图像分别为800x600、600x800和150x150，它如何处理此问题？我想如果图像比视口小，它不会放大，只是显示得更小，如果其中一个尺寸更大，它会缩小整个图像以适应它，但保持纵横比？这正是我想要的，谢谢！（你会对HMRC.gov在线退货网站的混乱感到惊讶——就像他们按照你的建议做了一样，但之后却没有时间进行优化！！）这正是我想要的，谢谢！（你会对HMRC.gov在线退货网站的混乱感到惊讶——就像他们按照你的建议做了一样，但之后却没有时间去优化！！）