How to make responsive image in the table cell?
<p>The image in the yellow <code>&lt;div&gt;</code> doesn't resize when the screen width gets smaller, and I don't know why. How can I fix that?</p>

<p>Here is a <a href="https://jsfiddle.net/fbyhrjxz/" rel="nofollow">JSFiddle</a> and the code below.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.s_container {
  margin: auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  overflow: hidden;
  border: none;
  display: table;
}
.ssm_opcion {
  display: table-cell;
  vertical-align: middle;
  background: yellow;
}
.ssm_opcion img {
  width: auto;
  height: auto;
  vertical-align: middle;
}
#text_opcion {
  width: 100%;
  height: 100%;
  min-width: 50px;
  display: table-cell;
  background: green;
}
.ti-ab-d {
  vertical-align: bottom;
  text-align: right;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="s_container seleccion_simple_default"&gt;
  &lt;div class="ssm_opcion"&gt;
    &lt;img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"&gt;
  &lt;/div&gt;
  &lt;div id="text_opcion" class="ti-ab-d"&gt;Prueba&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>