My opinion as precise as I can:
I would have a few different body backgrounds with matching dropshadows to give justice to different motives. I wouldn’t use thick borders. I would absolutly use dropshadows to give the image prominence.
I agree to 10px padding, but with a white image backgound-color to keep the photo style. I would probably have a 2px darker grey border combined with said dropshadows, same in all screen sizes. Smallest screens would loose the padding.
By the way, seems like I was off focus in post #13. Here is the mended code again. 
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<style>
html,
body{
margin:0;
padding:0;
height:100%;
}
body{
position:relative;
margin-right:24px; /* to cater for 100% image plus padding and border */
background:#aaa;
}
img{
position:absolute;
top:0;
right:-24px; /* adjust the center position in body to the viewport */
bottom:0;
left:0;
margin:auto;
border:2px solid #666;
/* comma separated shadows combines. Gives deeper darkness against the grey background */
box-shadow:5px 5px 25px #000, 5px 5px 25px rgba(0,0,0,.5);
padding:10px;
width:100%;
max-width:933px; /* its intrinsic width for best result */
background:#fff;
}
@media screen and (max-width:500px){
body{ margin-right:4px}
img{ right:-4px; border-color:#fff; padding:0} /* loose the padding */
}
</style>
</head><body>
<img src="VallettaB.jpg" alt="">
</body></html>