View Full Version : Image Size


benjaminsolah
09-20-2010, 07:39 PM
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.)

Adjust
09-21-2010, 12:56 AM
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.

benjaminsolah
09-21-2010, 12:58 AM
I don't have a CSS code for it either.

What are the tags to resize images? Does just width=100% work?

MrPLD
09-21-2010, 01:27 AM
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.

benjaminsolah
09-21-2010, 01:29 AM
You can't do percent to specify how much of the page it takes up?

MrPLD
09-21-2010, 01:30 AM
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.

benjaminsolah
09-21-2010, 01:31 AM
Sweet. Will try this on Sigil when I get home.

Adjust
09-21-2010, 01:32 AM
Just copy something like this into your CSS file twice, rename one like so
.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
09-21-2010, 01:32 AM
Just copy something like this into your CSS file twice, rename one like so
.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%
}

benjaminsolah
09-22-2010, 06:00 AM
Ok, added that CSS and it didn't work. It may be the parent container....

Adjust
09-22-2010, 05:59 PM
You applied the appropriate style to individual image as well, yeah?

AlexBell
09-23-2010, 06:30 AM
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

jharker
09-24-2010, 10:51 AM
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 (http://www.pigsgourdsandwikis.com/2010/05/controlling-image-size-in-ibooks-on.html).

AlexBell
09-24-2010, 11:47 PM
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 (http://www.pigsgourdsandwikis.com/2010/05/controlling-image-size-in-ibooks-on.html).

Thanks for the links.

Regards, Alex