Почему pinterest задает высоту изображения вместо ширины?

В последнее время я изучаю код страницы веб-сайта Pinterest, чтобы узнать некоторые дизайнерские трюки в CSS. Одна вещь, которую я наблюдал, это то, что они устанавливают высоту каждого из своих изображений, используя стиль CSS. Это странно для меня, потому что ясно, что все они изменены, чтобы иметь равномерную ШИРИНЬ 192px. Есть ли техническая причина для установки высоты вместо ширины?Почему pinterest задает высоту изображения вместо ширины?

Пример:

<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">

источник

2012-06-26 retailevolved

Pinterest использует кладку JQuery. http://masonry.desandro.com/ Теперь, если вы попытаетесь использовать кладку для плавания для объектов, как это делает Pinterest; наступает момент, когда ваши объекты не будут размещаться независимо от того, насколько сильно вы увеличиваете или увеличиваете масштаб. Если вы играете, установив ширину для объектов; вы скоро поймете математику за «192px» Pinterest. После предоставления разумного дополнения и поля, вам нужно назначить эту конкретную ширину для правильной функции расположения. Я работал над созданием веб-сайта, подобного Pinterest, и нам потребовалось более недели, чтобы расшифровать логику «ширина 192px для Pinterest»

источник

2012-06-26 04:53:10 xan

+1 для введения меня в кладку. Тем не менее, мой вопрос заключается в том, почему они устанавливают свойство height вместо ширины. Если ширина всегда равна 192, зачем подсчитывать, какая высота соответствует каждой высоте? Кажется ненужным, но, возможно, это требуется для кладки? – retailevolved

Pinterest никогда не вычисляет высоту. Он просто сохраняет изображение в ширину 192 пикселей, а высота динамически позаботится. Если вам посчастливилось увидеть код CSS Pinterest; это: 'element.style { height: 127px; // динамическая высота, вычисленная масонством, поэтому показана как ** element.style ** } .pin .ImgLink img { max-width: 192px; // главное непрозрачность: 1; } ' PS: Я не знаю, смогу ли я правильно объяснить вас. – xan

HTML-код, который появляется там, где вы видите свойство height, вызван масонством. – xan

"соотношение сторон" образов не всегда является оптимальным. Иногда, когда вы изменяете размер до высоты X и ширины Y, результирующее изображение будет шире или выше ожидаемого в зависимости от отношения ширины/высоты. Если вы установили фиксированную высоту в css, вы убедитесь, что она никогда не будет больше (и ваш дизайн не будет «ломаться»)

источник

2012-06-26 00:29:14

Итак, почему бы не установить фиксированную ширину вместо того, чтобы все ширины были точно такими же? Кажется, это был бы более простой способ сделать то же самое. Это только вопрос предпочтения? – retailevolved

Я не использую pinterest, но насколько я заинтересован, мне приходилось делать то же самое с моими изображениями; так как я не контролирую, насколько они широки или высоки. Я обычно использую max-width или max-height, чтобы добиться лучшего внешнего вида и не допустить, чтобы изображения нарушали мой дизайн. –

Почему pinterest задает высоту изображения вместо ширины?

ответ

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