TransWikia.com

Adjust image in qgis2web to pop up

Geographic Information Systems Asked on March 20, 2021

When exporting a webmap using qgis2web, the images I want to display are way to big and it makes very difficult to navigate through the map. Is there any way I can make them smaller and fit it to the pop up?

enter image description here

One Answer

As suggested, you can add a simple css rule to determine max width for the images.
The answer here won't work for you anymore since leaflet has changed the name of the popup content class.
There is also the problem where qgis2web uses a table inside its popups.

what you need to do, is open the index.html file and edit the ` tag.

instead of just:

<style>
  #map {
            width: 894px;
            height: 813px;
        }
</style>

add :

<style>
#map {
     width: 894px;
     height: 813px;
   }
 .leaflet-popup-content > table img {
    width: 300px;
   }
 .leaflet-popup-content > img { /*for other leaflet maps you can add rule as well*/
    width: 300px;
   }
</style>

you can change the number of pixels to match how you want you images to look.

Correct answer by Dror Bogin on March 20, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP