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

Question

[Dimox]

Добрый день.

Столкнулся с нестандартной задачей, которую не могу решить, хотя и верстаю очень давно.

Есть эмуляция таблицы соответствующими CSS-свойствами, в одной ячейке картинка, во второй текст. Нужно сделать так, чтобы картинка пропорционально растягивалась на высоту текста, независимо от разрешения экрана.

Заготовка - jsfiddle.net/k349os5o

Comments

[Dimox]

SelenIT2: Нет, должна увеличиваться при увеличении ширины экрана и наоборот.

Answer 1

[OutworldDevourer]

Попробуй ширину указывать в процентах, к примеру width: 100%. Поексперементируй с вложеными блоками

Answer 2

[Ваге]

Я приведу пример из jsfiddle.net/k349os5o
просто вы должны назначить ширину,назначим его 100px.

img {
    width: 100px;
    height:auto;
}

А высоту назначим автоматически height:auto;
А если вы были внимательно в том примеры был ширина автоматически а высота был назначен 100%.Вот и все ширина будет 100px а высота будет автоматически растягиваться на высоту текста.

p{
  display: table-cell;
  vertical-align: top;
}
img {
    width: 100px;
    height:auto;
}
.image {
    display: table-cell;
    vertical-align: top;
    padding: 0 20px 0 0;;
}
.section {
    display: table;
}

Comments

[Дмитрий Чащинов]

В фаерфоксе проверьте, не работает

[Ваге]

Дмитрий: а если height: auto !important;

[Dimox]

Vahe Araqelyan: это не работает.