Question

是否有人知道如何在CSS中或通过黑客攻击灯箱强制调整在灯箱中打开的图像？

我知道这不是一个很好的解决方案，有一个固定的图像大小（应该在上传时完成），但它是客户的特定要求。

感谢。

Answer 1

将此添加到css：

#lightbox-container-image img { width:auto; max-height:520px; }

Answer 2

<style>
    .lb-outerContainer { max-width:690px; max-height:520px; }
    .lb-image{ width:500px; max-height:500px;}
</style>

Answer 3

固定尺寸并不是一个糟糕的解决方案。只需将max-height或max-width（在CSS中）设置为任何（但不是两者） - 然后图像将正确缩放。

但是所有图像必须是相同的格式，否则高度/宽度可能会有所不同。

如果你在CSS（宽度，高度）中设置固定大小，那么图像将会出现。

Answer 4

在CSS中，您可以调整图像大小以填充最大宽度，同时仍保持相同的宽高比：

img {width:100%; height:auto}

只要容器是块，就应该调整图像大小。请注意，在较旧的浏览器中它可能看起来像素化，因为这些浏览器中使用的图像缩放器依赖于“最近邻居”采样来缩放图像。

Answer 5

不要使用css，只需使用图像元素上的jquery的width()和height()方法调整图像大小。

在你这样做之前，我建议将它们分开以获得比率，这样你就不会扭曲图像！：）

Answer 6

我在slimbox2中使用了这段代码：

#lbImage {

    width:320px;
    height:240px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    -moz-background-size: cover;

}

Answer 7

在jquery.colorbox.js中找到这些行

photo.style.width = photo.width+200 + 'px';
photo.style.height = photo.height + 'px';

并替换为

photo.style.width = photo.width+200 + 'px';
//photo.style.height = photo.height + 'px';

使用+符号删除图像高度并增加图像宽度。

灯箱 - 是否可以强制调整图像大小？

7 个答案: