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

Я пытаюсь получить макет, похожий на Pinterst. Пока у меня есть изображения, которые генерируются случайным образом в php между 125 и 400 пикселями.

Это не привело к эффекту, подобному Pinterest, где правильные пропорции кажутся динамическими. Кто-нибудь знает, как Pinterest динамически генерирует высоту своих изображений?

<div class="pin_image">

          <a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>" 
            src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
            </div>

image php html css pinterest
person new503    schedule 19.10.2012    source источник
comment
Пожалуйста, опубликуйте код, чтобы мы могли его посмотреть?   -  person jtfairbank    schedule 19.10.2012

Ответы (4)


arrow_upward
1
arrow_downward

Они основывают ширину изображения на ширине столбца. Так, например, если их столбцы имеют ширину 200 пикселей, а исходное изображение имеет высоту 600 пикселей и ширину 400 пикселей, они будут масштабировать изображение вдвое, чтобы оно соответствовало ширине столбца. Таким образом, 600 пикселей * 0,5 = 300 пикселей в высоту и 400 пикселей * 0,5 = 200 пикселей в ширину. Умножая оба размера на один и тот же процент, вы сохраняете соотношение сторон.

person Kevin Lawrence    schedule 19.10.2012
comment
Как я могу это сделать? ‹div class=pin_image› ‹a href=‹?php the_permalink(); ?››‹img width=191 height=auto class=‹?php echo $img_class; ?› src=‹?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?› /›‹/a› ‹/дел› - person new503; 19.10.2012
comment
Этот тег img должен это делать. Я только что проверил в Firefox/Chrome, что он работает здесь: jsfiddle.net/LmzZn - person Kevin Lawrence; 19.10.2012

arrow_upward
1
arrow_downward

Вам нужно что-то вроде Isotope или Кладка

Он не меняет высоту изображения, но упорядочивает макет в приятной манере.

person Robert Smith    schedule 19.10.2012
comment
У меня есть кирпичная кладка, но мне нужно иметь динамическую высоту и делать то же самое, что и pinterest. - person new503; 19.10.2012
comment
Masonry находится в Isotope, было бы глупо использовать всю библиотеку Isotope. - person tbleckert; 08.05.2013

arrow_upward
0
arrow_downward

Когда вы изменяете размер изображений, вам нужно делать это на основе ШИРИНЫ изображения. Поскольку то, что вы хотите, это исправление и высота. Например, если у вас есть изображение размером 1000 на 2000, и если ваш столбец имеет размер 100 пикселей, вам нужно изменить его размер до 100 на 200 (т. е. вычислить соотношение ширины и применить то же самое к высоте).

person xelber    schedule 19.10.2012

arrow_upward
0
arrow_downward

Вам просто нужно установить ширину тега равной ширине столбца. Соотношение сторон изображения будет сохранено, и высота будет установлена ​​соответственно.

person Jamal Ali    schedule 19.10.2012