03-26-2024, 06:32 AM | #1 |
Swepub
Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Images side by side in EPUB
Hi all
Is it posssible to have two or more images side by side in an EPUB? If yes, how does a sample code look like? If no, is the best option to make merge two images into one in Photoshop? |
03-26-2024, 08:15 AM | #2 |
A Hairy Wizard
Posts: 3,131
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
You can use the float command in your css file:
Code:
CSS
.images {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}
HTML
<div class="images">
<img class="floater" alt="" src="../Images/img_1.png"/>
<img class="floater" alt="" src="../Images/img_2.png"/>
<img class="floater" alt="" src="../Images/img_3.png"/>
<img class="floater" alt="" src="../Images/img_4.png"/>
</div>
Code:
CSS
.images {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}
HTML
<div class="images">
<img alt="" src="../Images/img_1.png"/>
<img alt="" src="../Images/img_2.png"/>
<img alt="" src="../Images/img_3.png"/>
<img alt="" src="../Images/img_4.png"/>
</div>
Last edited by Turtle91; 03-26-2024 at 08:20 AM. |
Advert | |
|
03-26-2024, 08:36 AM | #3 |
the rook, bossing Never.
Posts: 11,987
Karma: 88000007
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
It also works without float. An enclosing p or div can center them if the css for that has suitable CSS.
I'd put a class on each image to set the size. If you set the height all the same it looks better. The image class can also space them or have no spacing (margin and padding 0 in case set elsewhere). |
03-26-2024, 09:51 AM | #4 |
Grand Sorcerer
Posts: 27,699
Karma: 196509000
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Moved this to the EPUB forum since it's not really a Sigil topic.
|
03-26-2024, 10:04 AM | #5 | |
Swepub
Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Quote:
|
|
Advert | |
|
03-26-2024, 11:04 AM | #6 |
the rook, bossing Never.
Posts: 11,987
Karma: 88000007
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Have the outer div have CSS in its class to set left & right margins and padding 0 and center
HTML Code:
<div class="centred-stuff"> <img class="img-1" alt="" src="../Images/img_1.png"/> <img class="img-2" alt="" src="../Images/img_2.png"/> <img class="img-3" alt="" src="../Images/img_3.png"/> <img class="img-4" alt="" src="../Images/img_4.png"/> </div> I would use <p> CSS Code:
.centred-stuff { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; text-align: center } .img-1 { height: 100 px; width: auto; /* or exact pixels */ padding-right: 5px; } No padding on the last image on the line. If you use "pt" instead of "px" some renderers might change the image size as user changes font size! |
03-26-2024, 01:38 PM | #7 | |
A Hairy Wizard
Posts: 3,131
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
5+200+5 + 5+200+5 = 420px Code:
CSS .images {clear:both; width:420px; margin:0 auto} .images img {float:left; width:200px; padding:0 5px} HTML <div class="images"> <img alt="" src="../Images/img_1.png"/> <img alt="" src="../Images/img_1.png"/> </div> Code:
.images {clear:both; width:50%; margin:0 auto} .images img {float:left; width:45%; padding:0 2.5%} Edit: If the different values for width are confusing just remember that the width refers to the container’s width. In this case, the img width is 45% of the containing div. The total width of the images + padding equals 100% of the div width. For 2 images: 2.5%+45%+2.5% + 2.5%+45%+2.5% = 100% For 3 images: 1.66%+30%+1.66% + 1.66%+30%+1.66% + 1.66%+30%+1.66% = 100% The width of the div is the % of ITS container (the body/document) Last edited by Turtle91; 03-26-2024 at 09:15 PM. |
|
Tags |
epub, image |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Looking for old thread about images "side-by-side" | GrannyGrump | Workshop | 10 | 04-15-2019 12:11 PM |
Double Window Layout (Note) / Side by Side View (Max2) | glober | Onyx Boox | 1 | 03-26-2018 03:10 AM |
iPad Display two epub files side by side? | FlorenceArt | Apple Devices | 15 | 09-24-2015 01:21 AM |
Kobo Android app - Switch from single to side-by-side view | akuerz75 | Kobo Reader | 58 | 11-22-2011 05:29 AM |
Side by side images - argh. | LostSock | Sigil | 7 | 07-22-2011 10:21 AM |