Set CSS height or width (class of img tag) to like 95% (2.5% margin either side, I use 90%) and other property to auto.
Don't set margins.
Have it in a paragraph that's centred and use that style for caption too
<p class="some-centred"><img class="generic-landscape" ... etc </img><p>
<p class="some-centred">My Caption</p>
CSS
.some-centred {
text-align: center;
margin-top: 0.5em; /* whatever space above image and caption */
margin-bottom: 0.2em; /* whatever space above image and caption */
}
.generic-landscape {
height: auto;
width: 95%; /* or as desired */
}
.generic-big-portrait {
height:95%; /* or as desired */
width: auto;
}
.generic-small-portrait {
height:33%; /* or as desired */
width: auto;
}