You set height OR width to a % (height if a portrait shape, width of landscape) and set the other size to auto. If the image is square you can do % on either.
You can't set both height & width to a % unless you know the screen aspect and the image aspect.
I'd avoid as much as 100% on either axis unless maybe something you want to nearly fill the screen. You can only fill the screen completely if the image is the same shape as the screen.
Also enclose the image in either its own <p or <div
Code:
Fragment of HTML
<p class="p-cen"><img src="images/00005.jpg" class="land-imag"/></p>
<p class="caption"><span class="bold">THEY WERE ALL THERE</span></p>
CSS
.p-cen{
border-bottom: 0;
border-top: 0;
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: center;
text-indent: 0
}
.land-img{
margin-left: auto;
margin-right: auto;
height: auto;
width: 75%
}
You might have a top & bottom margin in the .p-cen to separate from text. You might have alt-text in the <img tag
My docx export imported to Calibre does all this except the .land-img CSS will be pixels so I edit it. Edit image css is the only edit I do of the ebook.