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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-20-2010, 07:39 PM   #1
benjaminsolah
Marxist Horror Writer
benjaminsolah began at the beginning.
 
benjaminsolah's Avatar
 
Posts: 30
Karma: 10
Join Date: Sep 2010
Location: Melbourne, Australia
Device: Sony Reader Touch PRS-650
Image Size

I have two images in my EPUB. I'm trying to resize them individually in the code instead of with CSS tags. Can you do this?

I need one to resize to fit the screen and another to just display inline (it's overlapping text on some readers.)
benjaminsolah is offline   Reply With Quote
Old 09-21-2010, 12:56 AM   #2
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Just copy and past the same image code from the CSS and rename, then apply the new one in the xhtml code to adjust it.
Adjust is offline   Reply With Quote
Advert
Old 09-21-2010, 12:58 AM   #3
benjaminsolah
Marxist Horror Writer
benjaminsolah began at the beginning.
 
benjaminsolah's Avatar
 
Posts: 30
Karma: 10
Join Date: Sep 2010
Location: Melbourne, Australia
Device: Sony Reader Touch PRS-650
I don't have a CSS code for it either.

What are the tags to resize images? Does just width=100% work?
benjaminsolah is offline   Reply With Quote
Old 09-21-2010, 01:27 AM   #4
MrPLD
Author's pet-geek
MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.
 
MrPLD's Avatar
 
Posts: 933
Karma: 1040670
Join Date: Sep 2010
Location: North Queensland, Australia
Device: Kindle 3 Wifi, Onyx Boox M96
If you want to overwrite the style in your code, just add in something like <img class='existingclass' style='width:50px;' src=.....>

The added style='' bits will override the class values.

I have noticed with some readers they prefer pt's or em's over px.
MrPLD is offline   Reply With Quote
Old 09-21-2010, 01:29 AM   #5
benjaminsolah
Marxist Horror Writer
benjaminsolah began at the beginning.
 
benjaminsolah's Avatar
 
Posts: 30
Karma: 10
Join Date: Sep 2010
Location: Melbourne, Australia
Device: Sony Reader Touch PRS-650
You can't do percent to specify how much of the page it takes up?
benjaminsolah is offline   Reply With Quote
Advert
Old 09-21-2010, 01:30 AM   #6
MrPLD
Author's pet-geek
MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.MrPLD ought to be getting tired of karma fortunes by now.
 
MrPLD's Avatar
 
Posts: 933
Karma: 1040670
Join Date: Sep 2010
Location: North Queensland, Australia
Device: Kindle 3 Wifi, Onyx Boox M96
Benjaminsolah,

Sure, you can try that too. width:60% etc. I should point out though its actual effect will depend on the width of the parent container.


Paul.
MrPLD is offline   Reply With Quote
Old 09-21-2010, 01:31 AM   #7
benjaminsolah
Marxist Horror Writer
benjaminsolah began at the beginning.
 
benjaminsolah's Avatar
 
Posts: 30
Karma: 10
Join Date: Sep 2010
Location: Melbourne, Australia
Device: Sony Reader Touch PRS-650
Sweet. Will try this on Sigil when I get home.
benjaminsolah is offline   Reply With Quote
Old 09-21-2010, 01:32 AM   #8
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Just copy something like this into your CSS file twice, rename one like so
Code:
.image {
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 1.2em;
     text-align: center;
}
.image100 {
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 1.2em;
     text-align: center;
    max-width: 100%
}
Then apply these to your images
Adjust is offline   Reply With Quote
Old 09-21-2010, 01:32 AM   #9
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Just copy something like this into your CSS file twice, rename one like so
Code:
.image {
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 1.2em;
     text-align: center;
}
.image100 {
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 1.2em;
     text-align: center;
    max-width: 100%
}
Adjust is offline   Reply With Quote
Old 09-22-2010, 06:00 AM   #10
benjaminsolah
Marxist Horror Writer
benjaminsolah began at the beginning.
 
benjaminsolah's Avatar
 
Posts: 30
Karma: 10
Join Date: Sep 2010
Location: Melbourne, Australia
Device: Sony Reader Touch PRS-650
Ok, added that CSS and it didn't work. It may be the parent container....
benjaminsolah is offline   Reply With Quote
Old 09-22-2010, 05:59 PM   #11
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
You applied the appropriate style to individual image as well, yeah?
Adjust is offline   Reply With Quote
Old 09-23-2010, 06:30 AM   #12
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
Here is what I use

div.illustration {
margin: 0 0 0 0.5em; padding: 0;
border: 1px solid black;
width: 50%;
float: right;
}
div.illustration img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
}
div.illustration p {
margin: 0; padding: 0;
text-align: center;
text-indent: 0; font-size: smaller;
} /* With thanks to Elizabeth Castro */

<div class="illustration">
<img src="images/source.png"
alt="alt text"/>
<p>caption</p>
</div>

It is modified from Elizabeth Castro's excellent book EPUB straight to the Point. Although it's written mainly for the iPad it has lot's of good stuff. I also like her book HTML, XHTML and CSS

Regards, Alex
AlexBell is offline   Reply With Quote
Old 09-24-2010, 10:51 AM   #13
jharker
Developer
jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.jharker could sell banana peel slippers to a Deveel.
 
Posts: 345
Karma: 3473
Join Date: Apr 2007
Location: Brooklyn, NY, USA
Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.
Alex beat me to it. This information (and more) is also on Liz Castro's blog. The entry most relevant to this issue is here.
jharker is offline   Reply With Quote
Old 09-24-2010, 11:47 PM   #14
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
Quote:
Originally Posted by jharker View Post
Alex beat me to it. This information (and more) is also on Liz Castro's blog. The entry most relevant to this issue is here.
Thanks for the links.

Regards, Alex
AlexBell 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
Editing image size benjaminsolah Sigil 6 09-22-2010 06:47 PM
How to get the maximum image size on a DX? Diegan Amazon Kindle 1 08-04-2010 12:05 PM
Cover image size crutledge Sigil 3 08-02-2010 03:31 AM
Cover Image Size gr8npwrfl Calibre 0 12-21-2009 12:49 AM
Rendered Image Size in Picture Mode (S/M/L)? adinb Sony Reader 6 03-06-2007 03:38 PM


All times are GMT -4. The time now is 02:18 AM.


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