I have created field for objects in a layer that allow me to input links that will display a photo on mouse-over for that object in a webmap made with the qgis2web plugin for QGIS v3.2.

How do I restrict the image size to some preset boundary? Currently, each photo is displayed at full extent. I don't want to resize the image to explicit dimensions, because some are oriented vertically, while others are oriented horizontally. I would like to preserve the original aspect ratio of the photos, while reducing their overall size.

Added 9/24/18: I am exporting as OpenLayers.

  • Can you tell us whether you are exporting your webmap in OpenLayers or Leaflet format (you choose this in the qgis2web dialog)? The answer will be different for each. Sep 24 '18 at 13:00
  • Exporting in OpenLayers. I added that to my question. Thank you @TomChadwin
    – Ryan S
    Sep 24 '18 at 17:48
  • please give me code and instructions how to do the same for leaflet
    – user29729
    Feb 26 '20 at 10:28

Find your exported map code, and open the file ./resources/qgis2web.css in a text editor. Add the following to the end of the file:

#popup-content img {max-width: 200px;}

Change 200px to the width you want. This won't enlarge images narrower than the stated max-width, but if all your images are larger, this could work for you.

  • 1
    Thank you! This is exactly what I wanted and worked perfectly.
    – Ryan S
    Sep 24 '18 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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