View Single Post
Old 05-25-2014, 05:39 PM   #12
eggheadbooks1
Read, don't parrot.
eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.eggheadbooks1 figured out that Keyser Söze was the Kevin Spacey character in less than 20 minutes.
 
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Hi odeta:

I'm at a loss. to reiterate the quandary: I want to specify image height to avoid images getting cut off in devices that do not automatically shrink to fit, AND avoid upsampling in high-res devices. The SVG wrapper solved both issues. BUT as this thread indicates, the wrapper is not read uniformly across iBooks or some older ePub readers. So the challenge is to achieve the same thing without SVG.

My image div sets the page alignment and adds a bottom margin:

Code:
 div.Image
	{text-align:center;
	margin-bottom:1em;}
To which I added an image class to limit the image size (I made it really small to make it easier to test on a laptop):

Code:
.image1
	{max-height:500px;
	 max-width:375px;}
I have created image classes in the past to control image size and they have worked, so I'm perplexed why this does not:

Code:
<div class="Image"><img alt="0425" class="image1" height="75%" src="../Images/0425.jpg" /></div>
What is happening is that if I leave in the height="75%", that works but the max-dimensions of the image class are ignored. If I take out the height="75%", the max dimensions of the image class are respected but now the images are cut off if they exceed screen dimensions because the height="75%" is gone.

If I try to add that value to the image class:

Code:
.image1
	{height:75%;
         max-height:500px;
	 max-width:375px;}
the max-height is not respected: ADE stretches the image to 75% and ignores the max-height AND the image ends up distorted. I tried adding "width:auto;" but no change. I tried adding "preserveAspectRatio:none;" but no change. I tried adding "preserveAspectRatio:xMidYMidmeet;" but no change.

I tried just making everything a style override:

Code:
<div class="Image"><img alt="0425" style="height:75%; max-height:250px; max-width:188px" src="../Images/0425.jpg" /></div>
but the results are the same: images are stretched.

I tried:
Code:
<div class="Image"><img alt="0425" height="75%" style="max-height:250px; max-width:188px" src="../Images/0425.jpg" /></div>
but the results are the same: images are stretched.

If you have a magic code to solve this dilemma, I would love to hear of it. I'm batting zero.
eggheadbooks1 is offline   Reply With Quote