JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="outer">
    <div class="image-wrapper">
        <img src="http://placehold.it/200x200" class="img-responsive voc_list_preview_img" alt="" title="" />
    </div>
</div>

CSS

.outer {
    width: 100px;
    
    padding: 20px 0;
    background: blue;
}

.image-wrapper {
    display: table;
    table-layout: fixed;
    
    padding: 20px 0;
    background: red;
}

.wrapper img {
    max-width: 100%;
}