Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 12-10-2013, 06:34 AM   #1
Gramlin
Junior Member
Gramlin began at the beginning.
 
Posts: 5
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.
Gramlin is offline   Reply With Quote
Old 12-10-2013, 09:08 AM   #2
RbnJrg
Evangelist
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: 441
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Gramlin View Post
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:

Code:
.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
RbnJrg is online now   Reply With Quote
Old 12-10-2013, 10:50 AM   #3
Gramlin
Junior Member
Gramlin began at the beginning.
 
Posts: 5
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?
Gramlin is offline   Reply With Quote
Old 12-10-2013, 11:11 AM   #4
RbnJrg
Evangelist
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: 441
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Gramlin View Post
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:

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>
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
RbnJrg is online now   Reply With Quote
Old 12-13-2013, 03:51 AM   #5
Gramlin
Junior Member
Gramlin began at the beginning.
 
Posts: 5
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?
Gramlin is offline   Reply With Quote
Old 12-13-2013, 05:34 AM   #6
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 501
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
A half-wild guess: maybe you should explicitly specify
Code:
display:block;
in the imgfexample definition?
What kind of object do you apply imgfexamlpe to? span, div ?
SBT is offline   Reply With Quote
Old 12-13-2013, 05:41 AM   #7
RbnJrg
Evangelist
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: 441
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Gramlin View Post
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:

http://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.
RbnJrg is online now   Reply With Quote
Old 12-13-2013, 05:48 PM   #8
Gramlin
Junior Member
Gramlin began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2013
Device: Kindle
Quote:
Originally Posted by SBT View Post
A half-wild guess: maybe you should explicitly specify
Code:
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 is offline   Reply With Quote
Old 12-13-2013, 05:49 PM   #9
Gramlin
Junior Member
Gramlin began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Oct 2013
Device: Kindle
Quote:
The answer is... yes! Read this post:

http://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.

Last edited by Gramlin; 12-13-2013 at 06:05 PM.
Gramlin is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 12:33 PM.


MobileRead.com is a privately owned, operated and funded community.