As you can see, I am not a web developer - most of my efforts are cribbed from Google. This is a cry for help...


iThoughts can export a kind of static mini website to represent a map - see here for an example. Note how you can click on the images and links etc.

I'm currently trying to make it 'responsive' to screen/window size changes by making it render the map image inside of an SVG tag. I do it this way so that the 'image map' (links within the image) are scaled along with the image itself.

I *think* I'm nearly there, but there are a couple of bits I can't get working. My goal is:

  • I want the image to resize to fit the width of the browser BUT not scale up beyond the actual image width. In that case I want it to be centered.
  • I want to place html below the image and have it butt right up to the bottom of the image (as the image is resized)


The 'problem' currently seems to be controlling the vertical height and thus where subsequent html is positioned (padding-bottom: seems to be significant!)

I'd welcome any suggestions for any web folks out there.