Fixing my gallery shortcode in wordpress - html

Question

I have been trying to figure out on how to fix my gallery shortcode in wordpress. Basically the objective is that user can place any size of images inside the shortcode and will not look stretch or distorted when viewed.
This is what is supposed to look like
http://i255.photobucket.com/albums/hh140/testament1234/Thumb_zpsf57e544b.jpg
This is what i have came up with when i coded it.
http://s255.photobucket.com/user/testament1234/media/thumbnail_zpsd95f993d.jpg.html?sort=3&o=0
If you notice the first image is missing a 5px margin at bottom. The 2nd and 3rd image is not touching the bottom of the div.
Here is the code for the function.ph
//Gallery Shortcode 2
function short_gallery($atts, $content = null) {
extract(shortcode_atts(array(), $atts));
return '<div class=" gallery_box"><div class="inner_gallery"><a class="fancybox" href="'.$content.'"><img src="'.$content.'"/></a></div></div>';
}
add_shortcode("gallery", "short_gallery");
And here is the code for my styling.
.gallery_box{background-color:#E8ECEF; float:left; margin:0px 20px 10px 0px; width:250px; height:200px; overflow:hidden }
.inner_gallery{margin:10px; margin:5px}
.inner_gallery img{max-width:100%; }
Been researching for hours on how i can achieve my desired results. It's ok if the image is crop as long it fits the container and the quality is not distored

Answer 1

Change your styles to match these:
-add border property to the gallery_box
.gallery_box{
background-color:#E8ECEF;
float:left;
margin:0px 20px 10px 0px;
width:250px;
height:200px;
overflow:hidden;
border:5px solid #E8ECEF;
}
-remove the ".inner_gallery{margin:10px; margin:5px}" class
-change .inner_gallery img to:
.inner_gallery img{
max-width : 400px;
max-height : 400px;
}
It's a quick shortcut solution but it gets the job done. As long as you're ok with cropping.

Answer 2

My suggestion would be to set the image as the background image of its container (or the background image of the img tag, and set the src to a blank image for proper scaling):
<figure>
<img src="BLANK_IMAGE_WITH_YOUR_TARGET_SIZE" style="background-image:url('URL')" alt="My Image" />
</figure>
Then set the background-size to cover:
figure { width:250px; border:solid 5px #666; margin:0 20px 10px 0; }
figure img { width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }