Variable/fixed image height

[RbnJrg]

Originally Posted by ElMiko

Sorry @RbnJrg, I've been away from my computer for a week, so haven't really had a chance to play around with this until now.

For the epub2, it doesn't honor a specific height (as the value there is set to "auto") making it ALWAYS 100% of the width of the window. (unless of course I change that value to Xem, in which case it runs the risk of the white space above and below if the screen is too narrow for the image)

By chance, did you open the last epub I uploaded?

For the epub3 solution, it's a little funkier still... Changing the max-height value doesn't seem to have any effect at all.

Of course! For that reason I told you to change the max-height to 25em, because the height will have the value to maintain the proportion; it wont have any effect even if you write max-height: 100em. Since you want your image is with a height of 4em, with "max-height: 4em", the height will be 4em or lower in order to maintain the proportion with the width.

In conclusion, and for an epub3:

With a xhtml code of:

  <p class="autoImg"><img alt="Hello" src="../Images/Hello.jpg"/></p>

and with styles of:

.autoImg {
  text-indent: 0;
  text-align: center;
  max-height: 4em !important;
  width: auto !important;
  margin: 0;
}

.autoImg img {
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid red;
  display: block;
}

then:

a) if the window is narrower than would accommodate a 2em height and proportional width (e.g. the WINDOW width is equivalent to 11em), the image is shrunk to fit the screen width-wise, maintaining a proportional height (i.e. resulting in an image that functionally has a height of 1.8333em and a width of 11em).



b) if the window is wider than the proportional width of the image at a height of 2em (e.g. 14em wide), it will honor the 2em height with proportionaly width (resulting in 1em of white space to the left and right of the image).



c) if the window matches the proportional width of the image at the defined 2em height, it would would look like scenario a, except the image would be exactly 2em (as defined) rather than shrinking to fit the window.



I add a border to the image so you can understand better the things. As you can see, you have everything you asked for.

PS: I worked with a height of 4em (and not 2em) as you stated in one of your first posts.

[ElMiko]

The last epub you uploaded had both epub2 and epub3 solutions.

the svg code for the the epub2 solution was:

.svg_inline {
  display: inline-block;
  width: 100%;
  height: auto !important;
  margin: 0;
  text-indent: 0;
}

which results in the image always scaling to fill 100% of the width of the window, rather than the coditional height parameters we've been discussing.

For the epub3 solution,

at a max height of 4em these are the results I get when the window is wide:



at a max-height of 2em this is what i get:



In all cases, it doesn't seem to care about the max-height value (at least not for determining the height of the image). It just keeps growing to fill the window width-wise.

EDIT: I also updated your original file to include the text-alignment and the border as per your latest message, but it made no difference in terms of the above described behavior (the only difference now being that there was a red border... obviously).

[RbnJrg]

Originally Posted by ElMiko

The last epub you uploaded had both epub2 and epub3 solutions.

the svg code for the the epub2 solution was:

.svg_inline {
  display: inline-block;
  width: 100%;
  height: auto !important;
  margin: 0;
  text-indent: 0;
}

which results in the image always scaling to fill 100% of the width of the window, rather than the coditional height parameters we've been discussing.

For the epub3 solution,

at a max height of 4em these are the results I get when the window is wide:

Attachment 218606

at a max-height of 2em this is what i get:

Attachment 218607

In all cases, it doesn't seem to care about the max-height value (at least not for determining the height of the image). It just keeps growing to fill the window width-wise.

EDIT: I also updated your original file to include the text-alignment and the border as per your latest message, but it made no difference in terms of the above described behavior (the only difference now being that there was a red border... obviously).

Please, read again my previous post and watch the code I wrote there.

[ElMiko]

Originally Posted by RbnJrg

Please, read again my previous post and watch the code I wrote there.

I did read it carefully. The only difference I've been able to discern is the use of "auto" within the margin property, which is not something you've addressed in any of the previous responses, which have been almost entirely about the max-height property. If this is the relevant change in the code, there's nothing in your responses that speaks to it at all, much less its importance. It's also distinct from the code in the most recent file you uploaded, despite the implication that that's file I should have used.

All of this notwithstanding, copying your revised code over the existing code (from your most recent upload), still doesn't get the same results that you appear to be getting. As you can see, the image doesn't have a 4em height despite there being plenty of window space to accomodate it.



You would be doing me a HUGE favor if you could share the epub file that produced the 3 images in this post as very clearly, I'm screwing something up in copying and pasting your incremental tweaks.

Separately—and again I apologize if i'm missing something subtle here—but I can't find any explanation in your responses to the epub2 conundrum. Or are you just saying that it can't be done?

[RbnJrg]

Originally Posted by ElMiko

You would be doing me a HUGE favor if you could share the epub file that produced the 3 images in this post as very clearly, I'm screwing something up in copying and pasting your incremental tweaks.

Ok, here you have the epub that produces the output in the post you mention:

Epub3_Solution_for_Variable-fixed_image_height.epub

It's an epub3 ebook. For epub2, you can only meet points a) and c) of your requirements. To meet point b), you need to limit the height, and that's not possible with ADE Legacy.

[ElMiko]

That... was incredibly helpful. Lightbulb moment. Thank you.

I think i understand how this is working, and why changing the max-height before was making things overlap in my version. Your code sets the max height at the container level, not the img level. In your epub3 solution, in order set the image height to, say, 2em, I have to add that to the css for ".autoImg img", not just ".autoImg".

What I'm still a bit flummoxed by is why this wouldn't work in epub2! I'm not seeing any properties that, individually, aren't recognized by that format. When you say ADE Legacy, I assume you mean this? Or are you saying that any epub2 file will fail to render that image using that combination of css. Also, in the event of failure, what happens? Does the file not open? Or will the image just not render? Or will it render, but not the way we want it to under condition (b)?

[RbnJrg]

Originally Posted by ElMiko

That... was incredibly helpful. Lightbulb moment. Thank you.

You are welcome

What I'm still a bit flummoxed by is why this wouldn't work in epub2! I'm not seeing any properties that, individually, aren't recognized by that format. When you say ADE Legacy, I assume you mean this?

Yes, ADE 2.x

Or are you saying that any epub2 file will fail to render that image using that combination of css. Also, in the event of failure, what happens? Does the file not open? Or will the image just not render? Or will it render, but not the way we want it to under condition (b)?

The issue is that ADE Legacy doesn't honor the property "max-height" but others epub2 ereaders (for example KOReader or Google Play Books) will accept the solution "for epub3". In ADE Legacy the epub will open but since max-height will be ignored, then you'll see an image with a width of 100% and with a height to maintain the proportion.

[JSWolf]

You really need to fix the code so it works in older ADE versions. Many people still use old versions of RMSDK such as a lot of Kobo users, Sony Reader users, nook users, etc.

[Turtle91]

Originally Posted by JSWolf

You really need to fix the code so it works in older ADE versions. Many people still use old versions of RMSDK such as a lot of Kobo users, Sony Reader users, nook users, etc.

Or not….

Older devices are antiquated. If they can’t keep up with current standards then they might as well be discarded. Or are you only interested in getting rid of Marvin because it is no longer updated??? Can’t have it both ways.

[JSWolf]

Originally Posted by Turtle91

Or not….

Older devices are antiquated. If they can’t keep up with current standards then they might as well be discarded. Or are you only interested in getting rid of Marvin because it is no longer updated??? Can’t have it both ways.

Kobo devices are not antiquated. That's the problem. You can't dismiss them because they are old which they are not. The firmware they can use is new. The Sage, Elipsa 2E, Clara BW, Clara Colour, and Libra Colour are all current Kobo Readers. So your reasoning not to support older RMSDK because the Readers that use it are old is incorrect. Oh and nooks are not old as well.