Maximize Image Width

[Cyberseeker]

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:

<div><img alt="My Diagram" src="../Images/my diagram.svg"/></div>

However, I would like them to utilise the maximum screen space of whatever device the reader is using. Could someone suggest code that tells the image to render itself to the maximum width (portrait or landscape) of the device they are on? Thereafter, can they be 'zoomed' even larger still?

[Turtle91]

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:

<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>

- Where 526 and 701 are replaced with the actual dimensions of your image.

If you want the image to be on the same page as text then you can just wrap it with a <div>:

<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%}

You can style the classes however you want. The style in the <img> is optional. If you have a lot of different sized images then you can enter that individual image's width in pixels. This prevents smaller images from getting too stretched and blurry on uber-large displays. If you only have a few images you can just give the <div> a different class name (image_600, image_1000, etc) and do all the styling in the stylesheet....pick your poison. Although purists will demand all styling is done in the stylesheet.

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,

[Cyberseeker]

Originally Posted by Turtle91

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:

I haven't tried this yet because most of my images are inserted in the text.

Originally Posted by Turtle91

If you want the image to be on the same page as text then you can just wrap it with a <div>:

Ive gone with your suggestion here. So far so good. Thank you.

	div.image {
width:100%; margin:2em auto; text-align:center;
}
	img       {
max-width:100%; max-height:100%
}

However, I want some of my images more than 100% So I tried changing the css dimensions to 200% but nothing happened. When I originally drew the images in Inkscape, I didnt worry too much about the width because, as you mentioned, svg is supposed to stretch. So, here I am, wanting to stretch them.

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?

[Turtle91]

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.

[Cyberseeker]

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.

[Cyberseeker]

Question continued here

[Cyberseeker]

Originally Posted by Turtle91

The SVG code for maximizing the display is:

<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>

- Where 526 and 701 are replaced with the actual dimensions of your image.

Im back again, this time trying your first option. Sorry for all the questions but its a learning curve for me.

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?

[Toxaris]

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.

[Cyberseeker]

Originally Posted by Toxaris

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.

Several of the chapters in my 'paper' book have a graphic timeline running along the bottom of each page. As I think about what you are saying, the solution for me, may be to consolidate all of them into one big diagram, and put it at the end of the chapter.

Hmm I can see that E-pub turns conventional desktop publishing on to its head.

[JSWolf]

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.

[Toxaris]

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.

[Cyberseeker]

Originally Posted by Toxaris

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.

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.

[Cyberseeker]

Originally Posted by Turtle91

The SVG code for maximizing the display is:

<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>

Just a small refinement please. Im changing the 100% to 95% so that my image is indented slightly from the text. Can you tell me how to center it in that case?

[Turtle91]

Originally Posted by Cyberseeker

Just a small refinement please. Im changing the 100% to 95% so that my image is indented slightly from the text. Can you tell me how to center it in that case?

The preserveAspectRatio="xMidYMid meet" selection takes care of that. It centers the image using the options: xMidYMid meet.

Check here for a definition of all the SVG terms.

[Cyberseeker]

Originally Posted by Cyberseeker

Several of the chapters in my 'paper' book have a graphic timeline running along the bottom of each page. As I think about what you are saying, the solution for me, may be to consolidate all of them into one big diagram, and put it at the end of the chapter.

OK, so my diagrams stretch across the screen when put on separately. Here is a single long diagram, and it works just fine:

<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>

And here is a consolidated picture of three of my long diagrams. No luck.

<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>

My large consolidated diagram does not stretch over the page as I would like it to. Why is that? It is the same code? The only thing I can think of, is that my picture has changed from being 'landscape' to 'portrait.' Nothing I do in creating the taller graphic seems to stretch over Sigils content pane.

I cannot attach an svg file, but can you duplicate a 900w x 1076h image in Sigil and make it stretch?