图像宽度不扩大在收藏

我创建了一个灯箱弹出图像时曾经你点击它，这是我的解决方案迄今：加大图像宽度不扩大在收藏

<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=preview

请点击图片，为什么图片不能展开。

来源

2015-10-20 Blaze

你plnkr有灯箱404 ..这样ATM没有包含的插件 – orgertot

它在我的浏览器和本地主机上工作得很好。 – Blaze

然后请更新您的plnkr或使用jsfiddle而不是 – orgertot

您正在调用错误的CSS和JS文件。在你普拉克他们应该是：

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

然后，你的形象不“扩展”，因为它是完全一样的缩略图。在href你应该链接到一个更大的图像，否则它不会“扩大”。

编辑

如果要强制图片来调整您可以覆盖灯箱CSS（不推荐，但嘿，你可以发挥与它周围）。尝试<link rel="stylesheet" href="lightbox.css">

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

来源

2015-10-20 12:04:20 1cgonza

应该有一个出路。 – Blaze

请参阅上面的编辑，您可以尝试使用不同的值而不是“100％”，它可以是特定像素，例如'width：500px'，但在这种情况下，您仅限于在Lightbox中使用的所有图像被强制调整为该宽度。小图像会像素化，这不是最佳做法。尽管如此，它会帮助你了解图书馆如何做它的功能，然后决定它是否适合你的需求。 – 1cgonza

好逻辑！我正在考虑切换到离子弹出。但这种方法很酷。 – Blaze

问题是，lightbox正在计算内联的宽度和高度。所以你不能用简单的css规则来改变它们。

你有2种可能：

1. 使用更大的图像。灯箱将照顾。

使用css标签！很重要。 width: 900px !important;我不喜欢这种解决方案。

来源

2015-10-20 12:00:27 orgertot

没有工作！我已经为此设置了宽度和高度 – Blaze

它正在工作。给css！重要的img本身 – orgertot

后添加此的<head>你需要确定有多少个像素宽度和高度内联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>

来源

2015-10-20 12:04:30 NaveenG

图像宽度不扩大在收藏

回答

相关问题