Cover page uses svg so that I can typeset text on the image and text is always sharp regardless of the device resolution.
In portrait works fine - the aspect ratio of devices are such that the image is always 100% of width. But in landscape the image is the way the left and nothing I've tried w/ CSS will center it.
Help?
In portrait works fine - the aspect ratio of devices are such that the image is always 100% of width. But in landscape the image is the way the left and nothing I've tried w/ CSS will center it.
Code:
<body>
<div class="coverpage">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="100%" height="100%"
viewBox="0 0 800 1120" preserveAspectRatio="xMinYMin">
<!-- svg code -->
</svg>
</div>
</body>
![[PaleoEntomology • 2026] Icaroramus perisi • A Firefly Relative that Smelled...](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZSY5sujLgS4W0hLrwP3gXEGbBufm075721BLGmRjXLTrFNRy9ifzFjWQEkp5yeEM6UMSz93etP8idZhDY1luqEd-kf4oj7whYT70jDlVj13xFFyfwl7rWW8kSp4-XCIF5z0VescEW9oMEdToo-_wMQHoJlbXOkgRvsXURHGngrcgyzILIjymGfXqdvE/w400-h244/Icaroramus_perisi-novataxa_2026-Li_Kundrata_Cai.jpg)
