Editing image size

[benjaminsolah]

I have two images in my eBook, one I want to display on a separate screen, the other inline with a review.

How do you resize and align images with ePub code? I already do know some HTML and CSS but does the basic width and height tags within an img src work?

[capidamonte]

Better practice is to use an external style sheet.

Image sizing and floats work in ePubs.

[paulpeer]

Originally Posted by benjaminsolah

I have two images in my eBook, one I want to display on a separate screen, the other inline with a review.

If you want it to appear on a seperate screen, you put it in a seperate xhtml file. Right click on "Text" in the left column, and select "add new item". Put the picture there.

[benjaminsolah]

Ok, so adding the width="100%" doesn't seem to work. This is my code.

<div class="P-P15" id="calibre_pb_8">
<div class="G-fr"><img alt="" class="calibre4" src="../Images/100000000000066B00000922ACB035C2.jpg" /></div>

These are the CSS styles.

.P-P15 {
background-color: white;
display: block;
font-family: "Times New Roman", serif;
font-size: 1em;
line-height: 150%;
margin-bottom: 0.6cm;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
page-break-before: always;
text-align: center
}

.G-fr {
background-color: #fff;
border: none;
display: block;
font-size: 1em;
height: 17.141cm;
left: -0.508cm;
margin-bottom: 0;
margin-left: 0.319cm;
margin-right: 0.319cm;
margin-top: 0;
padding-bottom: 0.026cm;
padding-left: 0.026cm;
padding-right: 0.026cm;
padding-top: 0.026cm;
position: relative;
top: -0.318cm;
width: 10.791cm
}

I'm also slightly worried that changing them will change other things as well within that class.

[paulpeer]

Originally Posted by benjaminsolah

Ok, so adding the width="100%" doesn't seem to work. This is my code.

It does work for me all the time. Try first to add the width to one image only, e.g. the cover image:

<img alt="kovrilo" src="../Images/img0001.jpg" width="100%" />

If that works, the problem is somewhere else. I see that you use two nested divisions

Originally Posted by benjaminsolah

<div class="P-P15" id="calibre_pb_8">
<div class="G-fr">

which partly contradict each other, e.g.

Originally Posted by benjaminsolah

padding-top: 0.026cm;
and
padding-top: 0;

I wouldn't be surprised that your reader gets mad by those contradictary instructions, and simply ignores what you want ...

[capidamonte]

You're trying to edit Calibre sourced (X)HTML?

Or is it two sources, some conversion, like Word-sourced HTML that's then fed into Calibre?

Way, way too complicated, I think. You've got stuff with absolute sizes, too.

Get your source into simple (X)HTML, then you can do just about anything. Spending hours chasing down whatever computer-named class or id is causing your problem is wasted effort b/c it won't be repeatable next time. All the class-names and work-arounds will be different. Calibre is not a tool for production work, it's a tool for "good enough" conversion.

My opinion, but I'm actually trying to be helpful, not just tossing bombs. Simple-ish (X)HTML makes almost every problem solveable. Massively complicated computer-generated (X)HTML is only useful the way Calibre does it -- as a work-around, designed to minimize hassle for the user on conversion.

Your code is literally trying to place everything on the screen in an exact position. Fighting that is going to be a nightmare.

$0.02

[benjaminsolah]

I got it to work. I think I'll try to make my own EPUB file next time though.