有没有办法为 ligtbox2 设置固定/自定义高度?
#lightbox img{ width: auto; height: 600px;}
这只会调整 img 而不是外部容器的大小。
使用该声明,您可以在img
内部设置样式#lightbox
尝试删除,img
以便您只进行样式设置#lightbox
这行得通吗?
#lightbox { width: auto; height: 600px;}
如果你浏览它创建的 HTML,你可以看到它被包裹在一个div
withid="lightbox"
和div
里面id="outerImageContainer"
。后者具有带有图像高度的样式属性。尝试瞄准那个。在 CSS 中覆盖它或在加载后更改高度。
<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>
这些解决方案都不起作用,但感谢您的帮助。我不得不在 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
...