Setting the width as a percentage is just telling it what percentage of the
container to use. If you set it at 50% then it will take up half of the div...which itself is set to fill the screen with a width of 100%...so effectively you are saying take up half of the screen for this image. Scaling the image in this manner doesn't work for what you want to do.
With an ebook's reflowable nature, the words will automatically fill the extra landscape that a larger display provides...they do NOT automatically increase in font size.
What I think you want is to increase the image when the FONT size is increased to keep the same proportion between the image and font.
You can do that by assigning the width to an "em". If you want the image to be the same height as 3 letters/lines you could say "width:3em" in your CSS. With that method you run the risk that the image would just get distorted/blurry as it was stretched too far, so you can add a maximum pixel width to say "none shall pass" this size. Similarly, you might have an image that is way too small if they are using miniscule font size, so you can add a minimum-width. It's up to you to determine the maximum, minimum and normal size you are comfortable with.
CSS
.image {width:3em; max-width:200px; min-width:50px}
HTML
<div class="Float-L"><img alt="methane" src="../Images/methane.jpg" class="image" /></div>