09-20-2010, 07:39 PM | #1 |
Marxist Horror Writer
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.) |
09-21-2010, 12:56 AM | #2 |
Addict
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.
|
Advert | |
|
09-21-2010, 12:58 AM | #3 |
Marxist Horror Writer
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? |
09-21-2010, 01:27 AM | #4 |
Author's pet-geek
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. |
09-21-2010, 01:29 AM | #5 |
Marxist Horror Writer
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?
|
Advert | |
|
09-21-2010, 01:30 AM | #6 |
Author's pet-geek
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. |
09-21-2010, 01:31 AM | #7 |
Marxist Horror Writer
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.
|
09-21-2010, 01:32 AM | #8 |
Addict
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% } |
09-21-2010, 01:32 AM | #9 |
Addict
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% } |
09-22-2010, 06:00 AM | #10 |
Marxist Horror Writer
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....
|
09-22-2010, 05:59 PM | #11 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
You applied the appropriate style to individual image as well, yeah?
|
09-23-2010, 06:30 AM | #12 |
Wizard
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 |
09-24-2010, 11:47 PM | #14 | |
Wizard
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:
Regards, Alex |
|
|
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 |