Question

我只需下载lightbox2样本并使用css＆amp; js成功创建我的灯箱。但是，当我点击放大（它假设更大）时，我发现图像不是原始尺寸。 css或js设置是否限制了尺寸？

期待你的快速回复。

谢谢！

Answer 1

灯箱在javascript级别重新调整图像的本机行为2：

案例1

如果在选项中设置了属性maxWidth / maxHeight：

maxWidth - 如果设置，图像高度将限制为此数字（以像素为单位）。宽高比将无法维持。

maxHeight - 如果设置，图像宽度将限制为此数字（以像素为单位）。宽高比将无法维持。

案例2

如果图像宽度或高度>比容器宽度，您可以查看lightbox.js中的changeImage函数以获取更多信息

// part of the code where resize checking occurs
    ...
            maxImageWidth  = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
            maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

         // Is there a fitting issue?
                if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
                  if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {

    ....

Answer 2

默认情况下，fitImagesInViewport选项设置为true。任何延伸到视口之外的图像都会调整大小，以便它们整齐地适合它。

如果您希望以全分辨率查看图像，并且对于在视口外部延伸的图像没有问题，那么您需要将此选项设置为false。

<script src="path/to/lightbox.js"></script>
<script>
    lightbox.option({
      'fitImagesInViewport': false
    })
</script>

此处提供了所有可用选项的列表： http://localhost:8000/dist/#options

Lightbox2中的图像大小有限

2 个答案: