Javascript lightbox上的图像宽度未扩展

我已经创建了一个灯箱，当你点击它时，它会弹出一个图像，这是我目前的解决方案：

<section>
    <h3>Two Individual Images</h3>
    <div>
        <a style="width:100; height:100;" class="example-image-link" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" data-lightbox="example-2"><img class="example-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" alt="image-1"/></a>
    </div>
</section>

这是我做的布朗克

---

请说明为什么单击时图像没有展开。

问题是lightbox正在内联计算宽度和高度。所以你不能用css规则轻易地改变它们

您有两种可能：

一,。 使用更大的图像。灯箱会小心的

使用css标签！重要的<代码>宽度：900px！重要的我不喜欢那个解决方案

---

您调用了错误的CSS和JS文件。在您的plunk中，它们应该是：

<link rel="stylesheet" href="lightbox.css">
...
<script src="lightbox-plus-jquery.min.js"></script>

---

您需要定义内联CSS中扩展的宽度和高度像素数：-

<section>
    <h3>Two Individual Images</h3>
    <div>
<a style="width:100px; height:100px;" class="example-image-link" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" data-lightbox="example-2"><img class="example-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" alt="image-1"/></a></div><hr />
</section>

两个单独的图像

您的plnkr有一个用于灯箱的404。。所以atm没有lightbox插件，包括它在我的浏览器和本地主机上运行得很好。那么请更新您的plnkr或使用JSFIDLE INSTEAD。我不明白为什么投票失败？为什么哪个图像没有扩展？为什么单击时某些内容会扩展？不起作用！我已经为此设定了宽度和高度，它正在工作。给css！重要的是img本身应该有一个解决办法。请参见上面的编辑，您可以尝试使用不同的值，而不是

100%

它可以是特定的像素，例如

宽度：500px

，但在这种情况下，您仅限于lightbox中使用的所有图像，以强制调整到该宽度。小图像将像素化，这不是最佳实践。不过，玩玩它，它会帮助你理解库是如何做的，然后决定它是否适合你的需要。很好的逻辑！我在考虑切换到离子弹出窗口。但这种方法很酷。

<style>
.lightbox .lb-image {
  width: 100%!important;
  height: auto!important;
}
</style>

<section>
    <h3>Two Individual Images</h3>
    <div>
<a style="width:100px; height:100px;" class="example-image-link" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" data-lightbox="example-2"><img class="example-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" alt="image-1"/></a></div><hr />
</section>