javascript - Flexslider slide with centered image in fixed aspect ratio div -

i using theme employs flexheader show banner images. since it's theme, cannot modify options of slide show directly , trying work around it.

what want height of banner stay same. 16:9 images use entire banner space, lower aspect-ratio images centered solid background color around them.

so trying pass particularly styled div list item (slide): create 16:9 div , solid gray background.

here example, works, slide logo stretched. how can keep image aspect ratio , keep image in horizontal center? or there easier way achieve want?

to achieve want, need remove height: 100% !important image element, because piece of code stretching it.

.flexslider .slides img {   width: auto; } 

but image wont filling whole slider area, there gap on both sides, wont stretched. make images fill whole slide, need upload image in correct size. hope understood i've meant.