Question

有没有办法为ligtbox2设置固定/自定义高度？

#lightbox img{ width: auto; height: 600px;}

这只会调整img的大小，而不会调整外部容器的大小。

Answer 1

通过该声明，您可以在img

中为#lightbox设置样式

尝试删除img，这样您只需定型#lightbox

这有用吗？

#lightbox { width: auto; height: 600px;}

Answer 2

如果您浏览它创建的HTML，则可以看到它包含在div中id="lightbox"，div中包含id="outerImageContainer"。后者的style属性具有图像的高度。尝试定位。要么在CSS中覆盖它，要么在加载后更改高度。

Answer 3

<html>
<head>
    <style type="text/css">
        #lightbox { border : solid 2px #000000; position:absolute; }
        #lightbox img { width:auto; height: 600px;}
    </style>
</head>
<body>
    <div id="lightbox">
        <img src="Desert.jpg" alt="desert" />
    </div>
</body>
</html>

Answer 4

这些解决方案都没有奏效，但感谢您的帮助。我不得不在js中弄脏手...这是我的黑客代码： lightbox.js

...
     // once image is preloaded, resize image container


            imgPreloader.onload = (function(){
                var scale = 600 / imgPreloader.height; //modified
                this.lightboxImage.src = this.imageArray[this.activeImage][0];
                this.resizeImageContainer((imgPreloader.width * scale), //modified imgPreloader.height);
            }).bind(this);
            imgPreloader.src = this.imageArray[this.activeImage][0];
        },

        //
        //  resizeImageContainer()
        //
        resizeImageContainer: function(imgWidth, imgHeight) {

            // get current width and height
            var widthCurrent  = this.outerImageContainer.getWidth();
            var heightCurrent = this.outerImageContainer.getHeight();

            // get new width and height

            var widthNew  = (imgWidth + LightboxOptions.borderSize * 2);
            var heightNew = (600 + LightboxOptions.borderSize * 2); //modified
...

Lightbox2中的自定义高度

4 个答案: