Size (ratio) of image preview is incorrect

Hi,

I’m using the lightbox-2.6 library and I have a problem with the size of the image in the popup.

The image is of a 4:3 ratio but it is displayed in the wrong ratio.

Here is the generated html for the popup preview:

---

<div id="lightbox" class="lightbox" style="display: block; top: 122px; left: 0px;">
    <div class="lb-outerContainer" style="width: 266px; height: 490px;">
        <div class="lb-container">
            <img class="lb-image" src="/LD/Photos/ylmcjjxq.jpg" style="display: block; width: 642px; height: 482px;">
            <div class="lb-nav" style="display: block;">
                <a class="lb-prev" href="" style="display: block;"></a>
            <a class="lb-next" href="" style="display: block;"></a>
        </div>
        <div class="lb-loader" style="display: none;">
            <a class="lb-cancel"></a>
        </div>
    </div>
</div>
<div class="lb-dataContainer" style="display: block; width: 266px;">
    <div class="lb-data">
        <div class="lb-details">
            <span class="lb-caption" style="display: none;"></span>
            <span class="lb-number">Image 7 of 10</span>
        </div>
        <div class="lb-closeContainer">
            <a class="lb-close"></a>
        </div>
    </div>
</div>

</div> ##

The lb-outerContainer seems to be the problem

<div class="lb-outerContainer" style="width: 266px; height: 490px;">

because the size of the img tag has the correct ratio

<img class="lb-image" src="/LD/Photos/ylmcjjxq.jpg" style="display: block; width: 642px; height: 482px;">

Thanks for your work and help.

[bendolan]

This problem looks similar to the bootstrap issue.

Please try adding the following to your CSS: .lb-image{ max-width: inherit; }

[mukesh019]

however the lightbox currently lacks a window resize event. Please make sure the lightbox scales correctly when the window is resized.

pls help me.