I am facing an issue where the image in the yellow <div> does not resize as the screen width decreases. Can someone help me troubleshoot this problem?
For reference, here is a link to the JSFiddle along with the code snippet provided below.
.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;
}<div class="s_container seleccion_simple_default">
<div class="ssm_opcion">
<img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div id="text_opcion" class="ti-ab-d">Prueba</div>
</div>