[Tex2002ans]

Okay, I believe I generated a test EPUB. (Attached to the end of this post.)

This was my methodology:

Attached below is the .bat file I used. Imagemagick generates the images that are 200px tall + 300px->1000px wide (in steps of 20px):

Spoiler:

convert -size 300x200 xc:black -fill black -stroke white -draw "line 0,100 300,100" -gravity North -pointsize 72 -annotate +0+0 300x200 300x200.png
convert -size 320x200 xc:black -fill black -stroke white -draw "line 0,100 320,100" -gravity North -pointsize 72 -annotate +0+0 320x200 320x200.png
[...]
convert -size 980x200 xc:black -fill black -stroke white -draw "line 0,100 980,100" -gravity North -pointsize 72 -annotate +0+0 980x200 980x200.png
convert -size 1000x200 xc:black -fill black -stroke white -draw "line 0,100 1000,100" -gravity North -pointsize 72 -annotate +0+0 1000x200 1000x200.png

This is a breakdown of each Imagemagick argument:

Spoiler:

• -size 1000x200
  
  • This is the ultimate width/height of the image
• xc:black + -fill black + -stroke white
  
  • This stuff just sets the color of background + line/text
• -gravity North
  
  • This just tells Imagemagick where to place the text.
    
  • North means top/center of image.
    
• -pointsize 72
  
  • This just tells Imagemagick what size text.
• -annotate +0+0 1000x200
  
  • This writes the text "1000x200" onto the image.
• -draw "line 0,100 1000,100"
  
  • This draws a line from Point A to Point B.
    
  • Note: Since the height of all images = 200, the midpoint = 100.
    
    • So the line goes from left midpoint (X = 0, Y = 100) to the right midpoint (X = 1000, Y = 100).
      
• 1000x200.png
  
  • This just tells it what to name the output file.

In the HTML itself, I used this basic code:

<h4>Width 100%</h4>

  <div class="orig"><img class="orig" alt="" src="../Images/300x200.png"/></div>
  <div class="kf7"><img class="kf7px100" alt="" src="../Images/300x200.png" height="200" width="300"/></div>
  <div class="kf8"><img class="kf8pc100" alt="" src="../Images/300x200.png" width="100%"/></div>

  <h4>Width 90%</h4>

  <div class="orig"><img class="orig" alt="" src="../Images/300x200.png"/></div>
  <div class="kf7"><img class="kf7px90" alt="" src="../Images/300x200.png" height="180" width="270"/></div>
  <div class="kf8"><img class="kf8pc90" alt="" src="../Images/300x200.png" width="90%"/></div>

  [...]
  
<h4>Width 10%</h4>

  <div class="orig"><img class="orig" alt="" src="../Images/300x200.png"/></div>
  <div class="kf7"><img class="kf7px10" alt="" src="../Images/300x200.png" height="20" width="30"/></div>
  <div class="kf8"><img class="kf8pc10" alt="" src="../Images/300x200.png" width="10%"/></div>

Under each Width, there are 3 images:

• orig
• kf7px##
  
  • This is resized height/width with exact px
    
    • Example: 80% -> 1000x200 = 800px x 160px
      
• kf8pc##
  
  • Just the width is resized to a given percent.

Edit: I also attached an EPUB with 600px tall images.