How to cancel lightbox image re-sizing?

Hello!

I've got a scanned document image on my test Joomla 3.6.2 site. Here it's URL:

idevsky.com

As you can see, on the right side there I've got a lightbox module (it's actually a Custom HTML module) that has this code in it:

<p><a class="spotlight" href="images/document2.jpg" data-lightbox="on" data-demo="group:mygroup1" data-spotlight="on"> <img src="images/document2.jpg" alt="demo" width="98" border="0" /></a></p>

Open in new window


My screen resolution is 1366x768. Full image size is W 583px H 800px. When I click on its icon, it opens up, but it's still like 50% smaller, than it's full original size. I made a printscreen image, that I will be attaching here. From what I was told, people who has Full HD monitors (1920x1080) they see the image in its fullness. So it's probably responsive, depending on the monitor's size. Anyhow, I wish to cancel the responsiveness and re-sizing at all. So on every screen resolution (I'm not talking about mobiles here) one would get a full size image after clicking on its icon.
1.jpg
Member_2_7970041Asked:
Who is Participating?
 
lenamtlCommented:
Hi,

I don't know with version you are using.

You can edit css
#lightbox-container-image img { width:auto; max-height:520px; }

Open in new window

change the value to what you need.

Just set max-height or max-width but not both!

if you set fixed size in CSS (width, height), all the image will need the same dimension otherwise the image will not resized correctly.

As I can see the page, just inspect the code with chrome (right click) then check the CSS values and do some tests with new values.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.