Image not resizing in some readers

[Gramlin]

Hello, would like to ask for assistance.

I'm using this style code to get an image to float, resize to larger windows but not exceed maximum. Works exactly as I would like in Sigil and iBooks. But Calibre's reader and Readium both display no change in image size, and nearby text actually overlaps the image.

.imgfexample {
float:left;
width:15%;
min-width:40px;
max-width:80px;
}
.imgfexample img {
display: block;
width: 100%;
}

Just looking for some insight into why, and whether this is controllable across readers.

[RbnJrg]

Originally Posted by Gramlin

Hello, would like to ask for assistance.

I'm using this style code to get an image to float, resize to larger windows but not exceed maximum. Works exactly as I would like in Sigil and iBooks. But Calibre's reader and Readium both display no change in image size, and nearby text actually overlaps the image.

.imgfexample {
float:left;
width:15%;
min-width:40px;
max-width:80px;
}
.imgfexample img {
display: block;
width: 100%;
}

Just looking for some insight into why, and whether this is controllable across readers.

Try supressing "width: 100%" in the ".imgfexample img" selector:

.imgfexample {
    float:left;
    width:15%;
    min-width:40px;
    max-width:80px;
}

.imgfexample img {
    display: block;
    width: 100%;
}

Be carefull since several ereaders don't support the property "max-width".

Rubén

[Gramlin]

Thank you.

Learning as I go. Found a decent tutorial for web html that explained how to limit a scaling image to a particular max. I suspected it might not translate perfectly to ePub.

Would you caution against using images that adjust size? It hardly matters on fixed screen devices but I was anticipating desktop readers. Bit ambitious, perhaps?

[RbnJrg]

Originally Posted by Gramlin

Thank you.

Learning as I go. Found a decent tutorial for web html that explained how to limit a scaling image to a particular max. I suspected it might not translate perfectly to ePub.

Would you caution against using images that adjust size? It hardly matters on fixed screen devices but I was anticipating desktop readers. Bit ambitious, perhaps?

Maybe by inserting the image employing only a block with a width in percentage of the screen you can have your image dinamically resized. For example:

1. In your css stylesheet:

p {
   text-align: justify;
   text-indent: 0;
}

.imgfexample {
   float: left;
   width: 30%; /* here you can set the width that you wish */
   height: auto;
   margin: 0 10px 10px 0;
}

2. And in your .html file:

<p><img class="imgfexample" alt="" src="../Images/YourImageHere.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

Of that way the image always will occupy the X% of the screen. But I'm not sure is that is what you want

Regards
Rubén

[Gramlin]

Thanks again.

Coming back to this, I have looked at the cryptic seeming code sigil applies when adding a cover image using the menu tool.

e.g.:
<div class="sgc-1"> /* (This refers to style for alignment, padding and margin) */
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1600 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1600" width="1200" xlink:href="../Images/Example%20Cover.jpg"></image>
</svg>
</div>

Would it be possible to use something similar to float a small image at the start of a text paragraph, and have it grow a bit for larger screens?

[SBT]

A half-wild guess: maybe you should explicitly specify

display:block;

in the imgfexample definition?
What kind of object do you apply imgfexamlpe to? span, div ?

[RbnJrg]

Originally Posted by Gramlin

Would it be possible to use something similar to float a small image at the start of a text paragraph, and have it grow a bit for larger screens?

The answer is... yes! Read this post:

https://www.mobileread.com/forums/sho...4&postcount=11

In this case, the SVG is a letter but you can use an image. In short, you can do with a SVG the same as any other kind of images (in fact, SVG is a Scalable Vector Graphic).

[Gramlin]

Originally Posted by SBT

A half-wild guess: maybe you should explicitly specify

display:block;

in the imgfexample definition?
What kind of object do you apply imgfexamlpe to? span, div ?

Not sure I follow. As far as I know, it is only to be listed in the imageexmaple img { } declaration.

It was to go inside a <div>, which would contain <img> and <p> tags.

[Gramlin]

The answer is... yes! Read this post:

https://www.mobileread.com/forums/sho...4&postcount=11

Wowzer, fabuloso! Thanks yet again. I remain mystified as to the purpose of all the "xmlns" addresses, but calling on it in the text looks simple enough.