Как сделать отзывчивое изображение в ячейке таблицы?

Изображение в желтом <div> не изменяется, когда ширина экрана становится меньше, и я не знаю почему. Как я могу это исправить?Как сделать отзывчивое изображение в ячейке таблицы?

Вот JSFiddle и код ниже.

.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>

источник

2016-01-19 Polo

ширина + таблицы макета. это то, что вы пытаетесь сделать: https://jsfiddle.net/hwr1dukq/1/ –

Да, но мне нужно, чтобы ширина была динамичной и адаптировала реальную ширину изображения – Polo

фактически, таблица (дисплей или html) адаптируется соответствовать контенту. вы, очевидно, пытаетесь сделать полную противоположность. как это может быть? https://jsfiddle.net/hwr1dukq/2/ –

Я не уверен, если это может быть исправлено с table, но вы можете использовать вложенные flexbox в достигните макета, который вы хотите. См. Демонстрацию и комментарии в строке.

jsfiddle

.s_container { 
 
    display: flex; /*flex*/ 
 
} 
 
.ssm_opcion { 
 
    background: yellow; 
 
} 
 
.ssm_opcion img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
#text_opcion { 
 
    background: green; 
 
    flex: 1 0 50px; /*grow + no shrink + basis*/ 
 
    display: flex; /*flex*/ 
 
    justify-content: flex-end; /*horizontal right*/ 
 
    align-items: flex-end; /*vertical bottom*/ 
 
}

<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>

источник

2016-01-19 16:15:47 Stickers

Отлично! Вы спасли меня. Благодаря! – Polo

Просто установите нормальные параметры размера изображения, как это:

max-width:100%; 
max-height:100%;

источник

2016-01-19 16:08:46 jsanchezs

Как сделать отзывчивое изображение в ячейке таблицы?

ответ

Смежные вопросы