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