Thread: Two images in a single page
View Single Post
Old 04-13-2020, 03:01 PM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,355
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Here is an example of what carmenchu suggested. I also recommend you test on your specific platforms.

Two on same page:
Spoiler:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style>
.imagegroup {margin:1em 0 0; page-break-inside:avoid}
.image {width:95%; margin:1em auto; font-size:.6em; text-align:center}
.image img {display:block; margin:0 auto .25em; width:100%; max-width:500px}
</style>
</head>

<body>
  <div class="imagegroup">
    <div class="image">
      <img src="../Images/img1.jpg" alt=""/>Figure 1: Angel, Buffy, and Spike
    </div>

    <div class="image">
      <img src="../Images/img2.jpg" alt=""/>Figure 2: The Crew
    </div>
  </div>
</body>
</html>

I would move the <style> into a separate, linked, css sheet. The max-width should be set to your images - it is there to prevent small images from being over-blown and getting fuzzy.

The 'page-break-inside:avoid' isn't always respected by devices/apps...but it doesn't hurt to try...

Two on same page, side-by-side:
Spoiler:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style>
.imagegroup {margin:1em 0 0; page-break-inside:avoid}
.image {float:left; width:45%; padding:0 2%; font-size:.6em; text-align:center}
.image img {display:block; margin:0 auto .25em; width:100%; max-width:500px}
</style>
</head>

<body>
  <div class="imagegroup">
    <div class="image">
      <img src="../Images/img1.jpg" alt=""/>Figure 1: Angel, Buffy, and Spike
    </div>

    <div class="image">
      <img src="../Images/img2.jpg" alt=""/>Figure 2: The Crew
    </div>
  </div>
</body>
</html>



These settings can all be adjusted to suit your preferences. I hope that helps!
Attached Thumbnails
Click image for larger version Name: same page.jpg Views: 193 Size: 122.4 KB ID: 178364   Click image for larger version Name: side-by-side.png Views: 180 Size: 387.4 KB ID: 178365  
Turtle91 is offline   Reply With Quote