if width or height is a percent (like 75% or 100%), the other property must be auto, because that percent is enclosing thing size, not image size, so
width: 50%;
height: 50%;
doesn't give a half size image, it will stretch to half height and width of the screen by default.
If the image is really 800 x 600 pixels (w x h) then these work
Absolute sizing
height: 300px;
width: 400px;
Set based on width and 2.5% of screen margin
height: auto;
width: 95%;
Or if it's a portrait image 1080 wide and 1920 high and you want it a 1/3rd of page
height: 33.3%;
width: auto;
If you want it centred put it in a p or div
<p class="centred"><img class="size2" src="images/image.png" alt="descriptive text"/> </p>
<p class="centred">Some caption</p>
.size2 {
height: auto;
width: 50%
}
.centred {
display: block;
font-family: "Droid Sans", sans-serif;
font-weight: bold;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
text-indent: 0
}
This class will do for a caption too.
Never use "auto" with any margin or padding property.