灯箱上的图像宽度未扩大
[英]Image width not expanding on 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>
我已经应用CSS内联元素来增加宽度和高度
style="width:500; height:500;"
这是我做过的小东西
http://plnkr.co/edit/ryX4px00cGvqZ0lszvBO?p=预览
请点击图片为什么图片没有展开。
3 个解决方案
解决方案1
2 已采纳 2015-10-20 12:04:20
您正在调用错误的CSS和JS文件。 在您的朋克中，他们应该是：
<link rel="stylesheet" href="lightbox.css">
...
<script src="lightbox-plus-jquery.min.js"></script>
然后，您的图像不会“展开”，因为它与您的缩略图完全相同。 在href您应该链接到较大的图片，否则它将不会“展开”。
编辑
如果要强制调整图像大小，可以覆盖灯箱CSS（不推荐，但是，您可以尝试使用它）。 尝试将其添加到<link rel="stylesheet" href="lightbox.css">之后的<head> <link rel="stylesheet" href="lightbox.css">
<style>
.lightbox .lb-image {
width: 100%!important;
height: auto!important;
}
</style>
解决方案2
0 2015-10-20 12:00:27
问题在于灯箱正在以内联方式计算宽度和高度。 因此，您无法使用CSS规则轻松更改它们。
您有2种可能性：
1.使用更大的图像。 灯箱会小心。
- 使用css标签！important。
width: 900px !important;我不喜欢这种解决方案。
解决方案3
0 2015-10-20 12:04:30
您需要定义内联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>
打开lightBox后如何增加图像宽度？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.