Dimox
@Dimox
Верстаю сайты

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

Добрый день.

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

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

Заготовка - jsfiddle.net/k349os5o
  • Вопрос задан
  • 7675 просмотров
Пригласить эксперта
Ответы на вопрос 2
@OutworldDevourer
Попробуй ширину указывать в процентах, к примеру width: 100%. Поексперементируй с вложеными блоками
Ответ написан
Комментировать
vahe_2000
@vahe_2000
Я приведу пример из 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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы