12-10-2013, 06:34 AM | #1 |
Member
Posts: 16
Karma: 10
Join Date: Oct 2013
Device: Kindle
|
Image not resizing in some readers
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. |
12-10-2013, 09:08 AM | #2 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
.imgfexample {
float:left;
width:15%;
min-width:40px;
max-width:80px;
}
.imgfexample img {
display: block;
width: 100%;
}
Rubén |
|
Advert | |
|
12-10-2013, 10:50 AM | #3 |
Member
Posts: 16
Karma: 10
Join Date: Oct 2013
Device: Kindle
|
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? |
12-10-2013, 11:11 AM | #4 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1. In your css stylesheet: Code:
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: Code:
<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> Regards Rubén |
|
12-13-2013, 03:51 AM | #5 |
Member
Posts: 16
Karma: 10
Join Date: Oct 2013
Device: Kindle
|
Can an SVG image be floated in the text?
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? |
Advert | |
|
12-13-2013, 05:34 AM | #6 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
A half-wild guess: maybe you should explicitly specify
Code:
display:block; What kind of object do you apply imgfexamlpe to? span, div ? |
12-13-2013, 05:41 AM | #7 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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). Last edited by RbnJrg; 12-13-2013 at 05:48 AM. |
|
12-13-2013, 05:48 PM | #8 | |
Member
Posts: 16
Karma: 10
Join Date: Oct 2013
Device: Kindle
|
Quote:
It was to go inside a <div>, which would contain <img> and <p> tags. |
|
12-13-2013, 05:49 PM | #9 | |
Member
Posts: 16
Karma: 10
Join Date: Oct 2013
Device: Kindle
|
Quote:
Last edited by Gramlin; 12-13-2013 at 06:05 PM. |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image resizing - how to disable? | ATimson | Calibre | 2 | 04-05-2012 12:08 AM |
rtf -> epub, image resizing not desired | Meow | Calibre | 2 | 01-07-2011 12:36 AM |
Image resizing | Falcao | Feedback | 7 | 10-28-2010 04:32 AM |
any better ideas ? (image resizing) | zelda_pinwheel | IMP | 20 | 03-30-2008 01:10 AM |
Final word on iLiad's image resizing? | Asterra | iRex | 3 | 12-04-2007 05:47 AM |