Hi Jellby:
This is the code we eventually came up with:
Code:
<div class="Main" style="text-align: center;">
<svg style="max-width:300px; max-height:600px"
xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"
preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 300 600"
xmlns:xlink="http://www.w3.org/1999/xlink" ><image height="600" width="300"
xlink:href="../Images/Image1.jpg"></image>
</svg>
</div>
It works great in that it achieves its objective of downsizing images on small screens while limiting the potential upsizing of small images beyond their native dimensions, and it allowed me to center the images, but all surrounding text is pushed off screen. So something like my logo on my title page I have had to simply set a fixed pixel dimension. I can also do a percentage of screen height.
When I first did these tests, I had only images in my test file. Two small images would display together on the screen so I did not imagine that surrounding text would not behave the same way. Wrong. The SVG wrapper is essentially behaving like text jump text wrap.
If there's nothing that can be done, so be it. It's still the lesser of two evils. But if there is a way to fix this that would be great.