View Single Post
Old 06-09-2025, 10:29 PM   #10
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,827
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Part of the issue here is that the images I'm dealing with are a) not covers,
On epub2, this is a problem if the height of the image is higher that its width. If the image is wider than it is tall, no problem, with the following code you solve your issues:

Code:
img.all {
  display: inline-block;
  width: 99%; /* or whatever width you wish */
}

.image-setup {
  text-indent: 0;
  text-align: center;
  margin: 0;
}
and in the .xhtml file:

Code:
<p>text text text...</p>
<div class="image-setup">
    <img class="all" src="../Images/your_image.jpg" alt="">
</div>
<p>text text text...</p>
OTOH, under epub3 you can do whatever with images, regardless of whether its height is greater than its width. By setting heights in "vh" and using svg wrappers all problems are solved. And if you employ a bit more complex code, you can even avoid blank spaces originated by images.

Quote:
b) not of a consistent height/width,
As I said, under epub3, that is not a problem; under epub2 as long as the image's width is greater than its height, there's no problem using the code I wrote above. If the height is greater, then you definitely need to use SVG wrappers and set a height "a priori" for the containing block, something like:

Code:
div.wrapper {
   height: 60%; /* This is for ADE */
   height: 60vh; /* This is for Webkit/Readium */
}
and in the .xhtml file:

Code:
<div class="wrapper">
   <svg...><image.../></svg>
</div>
Instead of 60%/60vh, use whatever values ​​you think are most appropriate (don't employ 100%/100vh, at most, since your images are inserted into the body of the text, use 95%/95vh -and you may still need to use a lower value); however, you won't be able to avoid white space in the body of the epub2.

Quote:
c) many in number. So I'd hoped there was something that could be generically (and effectively) applied with a simple "class" modification... maybe a <div> if it was being especially intransigient...
You can appy a general class and to style inline (or with another class) in those images that no follow the rule. For example you can have as general class:

Code:
img.all {
  display: inline-block;
  width: 99%; /* or whatever width you wish */
}
and and as a special class:

Code:
.special_width {
   width: 50%; /* Or whatever you wish */
}
Then, for your special images you employ:

Code:
<div class="image-setup">
    <img class="all special_width" alt="" src="../Images/your_image.jpg" />
</div>
You can do something similar for svg wrappers.
RbnJrg is offline   Reply With Quote