html - Center different size images horizontally and vertically in a fixed div -

i'm having bit of struggle here positioning image inside div. div fixed 219x197px images loaded wordpress , need proof if image smaller or larger that, centered , overflow hidden if larger , either stretched or centered if smaller (what happens when smaller doesn't matter).

i not want resize image, want show centered , whatever fits on div shown while rest hidden overflow.

i found question around managed center horizontally, cannot vertically.

i tried margin-left percentage not constant different image sizes. tried stuff line-height , vertical-align nothing seems work properly.

does know try? in advance! here's html , css works center horizontally:

<div class="img_article"> <span> <?php get_post_image($post->id,'large'); ?> </span> </div>  .img_article {     border-bottom: 1px solid #ef5589;     overflow: hidden;     width: 219px;     height: 197px;     text-align: center; } .img_article > span {     display: block;     width: 1000px;     height: 1000px;     margin-left: -390px; /* -(width-container width)/2 */ } .img_article > span > img {     display: inline-block; } 

i don't know tried line-height , vertical-align, should working.

.img-hold { height: 200px; line-height: 200px; text-align: center; } .img-hold img { verticale-align: middle; } 

demo