Sharapov
@Sharapov

DIV под свою ширину ресайзит фото, а фото по своей высоте ресайзит DIV?

Резиновая сетка товаров из трёх колонок. Фото будут разных размеров и пропорций.
Товар состоит из двух дивов: div.grid_photo (жёлтый) и div.grid_description (зелёный)

Есть ли способ сделать без JS так, чтобы:
Фото пропорционально ресайзилось под ширину жёлтого дива (div.grid_photo),
а жёлтый див принимал высоту этого фото, и сдвигал вниз зеленый див описания (div.grid_description)?

Код онлайн:
jsfiddle — https://jsfiddle.net/yqa0orLe/
codepen — https://codepen.io/anon/pen/YWoyLw511327f543c646e0861291fc42862202.png
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
sadisme
@sadisme
font-size:30rem
Не очень понял, в чём загвоздка?
.grid_photo img {vertical-align: top; width: 100%; height:auto !important;}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Kstl
Начинающий верстальшик
возможно я туплю и не понимаю вопроса.
Но :
img => width = 100%
grid_1 => убрать фиксированную высоту

Собственно всё.
P.S. чтоб убрать полоску у жёлтого дива (grid_photo) img => vertical-align: middle;
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы