05-16-2017, 04:19 AM | #1 |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Maximize Image Width
I want to use SVG diagrams in my book, and they have various widths. Up till now I have been inserting them with the following code:
Code:
<div><img alt="My Diagram" src="../Images/my diagram.svg"/></div> |
05-16-2017, 10:24 AM | #2 |
A Hairy Wizard
Posts: 3,119
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
|
If you want the diagrams on their own page I would recommend an SVG wrapper. If you are using Sigil then there is a plugin to insert an image. Do a search on SVG...there are a lot of threads talking about this issue.
The SVG code for maximizing the display is: Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 526 701" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="526" height="701" xlink:href="../Images/Test.jpg"/> </svg> If you want the image to be on the same page as text then you can just wrap it with a <div>: Code:
<div class="image"> <img alt="" src="../Images/test.jpg" style="max-width:600px" /> </div> div.image {width:100%; margin:2em auto; text-align:center} img {max-width:100%; max-height:100%} -OR- <div class="image_600"> <img alt="" src="../Images/test.jpg" /> </div> div.image_600 {width:100%; margin:2em auto; text-align:center; max-width:600px} img {max-width:100%; max-height:100%} edit: Of course, if you are using solely .svg diagrams then you don't need to worry about the max-width and blurring/stretching issues. But you can use this technique with other formats as well. Cheers, Last edited by Turtle91; 05-16-2017 at 11:00 AM. |
05-16-2017, 02:32 PM | #3 | ||
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Quote:
Quote:
Code:
div.image { width:100%; margin:2em auto; text-align:center; } img { max-width:100%; max-height:100% } Please don't tell me I have to draw my pictures again. Is there something I can add to the stylesheet to stretch the image across the screen? Last edited by Cyberseeker; 05-16-2017 at 02:37 PM. |
||
05-16-2017, 02:57 PM | #4 |
A Hairy Wizard
Posts: 3,119
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
|
I don't think 200% would do anything...the screen is only 100% wide.
What I'm thinking is that your image files themselves have a bunch of space around them?? Can you open the svg in an svg editor and crop out any space?? You may need to create a blank file and then copy/paste the svg code. |
05-16-2017, 06:51 PM | #5 |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
White space is not the problem. My website seem to be rendering SVG images at full width. The problem I'm having seems to be happening in Sigil. The content pane shows text at full width but inserted images at about 75%. I'll repost on the Sigil forum.
|
05-17-2017, 06:15 AM | #7 | |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Quote:
Ive tried the above option inbetween my text paragraphs and the image expands and contracts the way I hoped it would. It looks good. The only trouble is, that it has a very large gap from the text, and I cannot see any thing about "padding" or whatever to reduce that gap. Is this method only for use on a separate page with no text? If so, would the Sigil plugin do it without the gap? Last edited by Cyberseeker; 05-17-2017 at 06:19 AM. |
|
05-17-2017, 07:53 AM | #8 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
The wrapper will fill the whole page. So, the gaps cannot be avoided. Therefore it is usually better to keep those images either at the start or beginning of a chapter.
|
05-17-2017, 01:44 PM | #9 | |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Quote:
Hmm I can see that E-pub turns conventional desktop publishing on to its head. |
|
05-17-2017, 01:47 PM | #10 |
Resident Curmudgeon
Posts: 74,576
Karma: 129670952
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
You can't run a graphic at the bottom of every page. It's not doable. The bottom of the page is not always the same. Many different variables change where the bottom of the page is.
|
05-17-2017, 03:39 PM | #11 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Well, you can used fixed layout. But that differs strongly per device (if supported at all,, most won't). You would be better of with a PDF.
|
05-17-2017, 05:40 PM | #12 |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Ive been down the pdf track with Amazon's new tool for educational pubs. It ok but html is more flexible. 'Just that I have to put my learning hat on.
|
05-19-2017, 06:52 AM | #13 | |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Quote:
|
|
05-19-2017, 10:53 AM | #14 | |
A Hairy Wizard
Posts: 3,119
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:
Check here for a definition of all the SVG terms. |
|
05-21-2017, 07:47 PM | #15 | |
Connoisseur
Posts: 60
Karma: 602194
Join Date: Apr 2017
Device: Ipad
|
Quote:
Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 200" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="900" height="200" xlink:href="../Images/singlelongdiagram.svg"/> </svg> Code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 1076" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="900" height="1076" xlink:href="../Images/consolidateddiagram.svg"/> </svg> I cannot attach an svg file, but can you duplicate a 900w x 1076h image in Sigil and make it stretch? Last edited by Cyberseeker; 05-21-2017 at 07:52 PM. |
|
Tags |
image, svg, width, zoom |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
fit a image to the width of screen | leescott | ePub | 7 | 07-23-2015 10:39 AM |
Maximize Image | Francois Driesen | Calibre | 8 | 08-19-2014 02:58 PM |
Changing image width in the economist | goios | Recipes | 1 | 04-24-2014 01:29 PM |
problem with floating image and relative width | jobalcaen | ePub | 5 | 08-17-2013 07:53 AM |
Setting Image width on news feed | Wiggles | Calibre | 2 | 08-13-2010 02:10 AM |