I have created a map and imported geolocated pictures. I have no issues with the map in QGIS it self all works great the pop-ups work great.

My issue is when I export the map with qgis2web I get the full size image when I hover or click on the icon. Is there a way to make it display at a reasonable size? at least one that does not crop the picture and the user can see what it is.

Using: QGIS 3.22 with qgis2web 3.16.0 - exporting to leaflet

See samples below:

Image 1 in QGIS no problem 600px width Image 1 in QGIS no problem

Image 2 webmap from qgis2web) original size 2400px (width) Image 2 webmap from qgis2web) original size 2400px (width)

1 Answer 1


The guys at qgis2web helped with this bit of info:

Edit the index.html and qgis2web.css as follow:

index.html in the var popupContent the photo features property replace it with this at the end.

.trim() + '" '+ 'class=popupImage' +'>' : '') + '</td>\

qgis2web.css add the following at the end of the file:

.popupImage {
    max-width: 100%;
    max-height: 100%;
.popupImage2 {
    max-width: 50%;
    max-height: 50%;

That was it! It works now! The only issues is that every time I update the map I will have to make the changes again.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.