Изменение размера изображения в ячейке таблицы

Question

У меня проблема с изменением размера изображения в желтом div. Я не могу установить max-width на 100%, потому что он исчезает и также не может установить фиксированную ширину для div, потому что мне нужно, чтобы он был динамическим. Как изменить размер изображения без настройки ширины?

.container{ 
 
    margin: 0px auto 0px auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-spacing: 0px; 
 
    overflow: hidden; 
 
    border: none; 
 
    display: table; 
 
} 
 

 
.opcion{ 
 
    display: table-cell; 
 
    background: yellow; 
 
} 
 

 
.opcion img{ } 
 

 
.texto{ 
 
    width: 100%; 
 
    display: table-cell; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div class="opcion"> 
 
     <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 

 
    <div class="texto ti-ab-d"> 
 
     <label for="test"><p>Prueba</p></label> 
 
    </div> 
 
</div>

Answer 1

Вы можете сделать это с Flexbox

.container{ 
 
    margin: 0px auto 0px auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-spacing: 0px; 
 
    display: flex; 
 
} 
 

 
.opcion{ 
 
    background: yellow; 
 
    flex: 0 1 auto; 
 
} 
 

 
.opcion img { 
 
    width: 100%; 
 
} 
 

 
.texto{ 
 
    background: green; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div class="opcion"> 
 
     <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 

 
    <div class="texto ti-ab-d"> 
 
     <label for="test"><p>Prueba</p></label> 
 
    </div> 
 
</div>

Answer 2

попытка удалить этот

margin: 0px auto 0px auto; 

Answer 3

Попробуйте это :) Это растягивает изображение Я считаю, чтобы соответствовать

.opcion.image { 
    background-image: url("file.png"); 
    height:100%; 
    width:100%; 
}