table-cell adapt to image - html

Question

I have this problem. I need that the yellow div adapts to the contained image; its width is dynamic, so I can't use a fixed width.
I can't find a solution anywhere, and I've tried with margin: 0; display:block; but nothing.
Here is the code:
HTML
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test" ><p>Prueba</p></label>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
CSS
.s_container{
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion{
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background:yellow;
}
.img_opcion{
display:;
width: auto;
max-width: 100%;
}
.ssm_opcion img{
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion{
width: 100%;
height:100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background:green;
}
.ti-ab-d{
vertical-align: bottom;
text-align: right;
}
.s_container {
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion {
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background: yellow;
}
.img_opcion {
display: ;
width: auto;
max-width: 100%;
}
.ssm_opcion img {
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion {
width: 100%;
height: 100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background: green;
}
.ti-ab-d {
vertical-align: bottom;
text-align: right;
}
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test">
<p>Prueba</p>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>

Answer 1

You have some conflicting CSS in the snippets you provide, I've modified the code to remove the .img_opcion CSS you had in there. Image autosizes to the container nicely.
https://jsfiddle.net/Lvv7Lxrs/1/
EDIT: the width declaration is just to prove the container snaps to size, as the default "broken image" browser stand-in is a bit small.

Answer 2

If you add a div and in the div you put a paragraph inside the div, if you give to div such rules css a background-color: #color, the div fits automatically to the paragraph, you don't must you do not have mandatory put a width-height fixed.