燈箱上的圖像寬度未擴大
[英]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.