View Full Version : problem with floating image and relative width


jobalcaen
11-23-2012, 10:13 PM
Hello Everyone,

I'm trying to float an image with a max-width of 50% but its not working correctly. The following code works well in ibooks and firefox epubreader (but it ends up filling the entire page in ADE, PRS-505,aldiko :


<div><img alt="sage gemme" src="../Images/pic0002.png" style="float: right; max-width:50%;" /></div>

It works if I change max-width to width, but then if I view the book in fullscreen in ADE it ends up getting stretched.

Any input is appreciated.

Thanks

AlexBell
11-24-2012, 12:46 AM
For what it is worth here is what I use to float text round a drop cap image:

CSS
div.illustrationL {
margin: 0; padding: 0 0.25em 0 0;
/* border: 1px solid black; */
width: 33%;
float: left;
}
div.illustrationL img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
} /* With thanks to Elizabeth Castro */


HTML
<div class="illustrationL">
<img src="images/ch01cap.jpg"
alt="alt text"/>
</div>

It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS from Peach Pit Press.

GrannyGrump
11-25-2012, 11:24 PM
I don't know if it is worth anything as advice, but also I usually set a maxwidth in pixels for images so they can't upsize too much. At most, 25% bigger than the native size. It might not be a "best practice" but keeps my images from fuzzing out and looming ominously.

jobalcaen
11-27-2012, 05:59 PM
Great thanks this worked perfectly :)

Nabodita
08-15-2013, 11:20 PM
For what it is worth here is what I use to float text round a drop cap image:

CSS
div.illustrationL {
margin: 0; padding: 0 0.25em 0 0;
/* border: 1px solid black; */
width: 33%;
float: left;
}
div.illustrationL img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
} /* With thanks to Elizabeth Castro */


HTML
<div class="illustrationL">
<img src="images/ch01cap.jpg"
alt="alt text"/>
</div>

It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS from Peach Pit Press.

You just saved my sanity. Thank you!

AlexBell
08-17-2013, 08:53 AM
You just saved my sanity. Thank you!

You're very welcome. I've learned a lot from others on MobileRead, and it's a pleasure to be able to pass some of that knowledge on.