Увеличение картинки в многоугольнике

[Crystal-3]

Здравствуйте.

Не могу решить задачу. Есть картинка в многоугольнике, по наведению она должна увеличиваться. У меня сейчас получается только эффект "гармошки": http://codepen.io/anon/pen/wGaoqY.

Знаю откуда ноги растут - картинке задана высота 100%, но если установить auto, то тогда на hover искажается многоугольник.

Подскажите, пожалуйста, как это исправить.

[Igor Schnaider]

http://codepen.io/anon/pen/ZWGLZv

[DivMan]

scale.

 

Надо всё переделывать.

Edited March 2, 2016 by DivMan

[Crystal-3]

Тогда подскажите как переделать.

[DivMan]

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

[Crystal-3]

http://codepen.io/anon/pen/ZWGLZv

Да, это именно то, что нужно!) Игорь, спасибо огромное, вы мне очень помогли

[Launder]

http://codepen.io/anon/pen/ZWGLZv

 

А зачем в 9 строчке кода CSS width: 100%?

[Igor Schnaider]

 

http://codepen.io/anon/pen/ZWGLZv

 

А зачем в 9 строчке кода CSS width: 100%?

 

 

Это стили, которые были изначально. Не мои.

[Launder]

Вот так, пожалуй, чуть поаккуратнее

[Igor Schnaider]

Вот так, пожалуй, чуть поаккуратнее

 

Я бы высоту все-таки оставил ;-)

[Launder]

Ну а чем мы рискуем?

Более того, работает, даже вот так. И в данном случае уже мы можем запросто менять изображение.

[Igor Schnaider]

Не, ну если полагаться на размеры картинки, то можно забить и на высоту, и на ширину, как вы сделали :-)

Если все-таки делать более гибкое решение, то лучше размеры оставлять. Плюс еще учитывать соотношение сторон.

[Launder]

Секундочку, как раз, по-моему, гибкость, это не зависимость логики от деталей, в данном случае, оформления от картинки. Поменял картинку - стили подстроились. А вот когда мы вручную вбиваем стили, при смене картинки - это как раз жёсткое решение, и, наверное, в некоторых случаях, менее удобное.

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

А какие минусы Вы видите, в такой реализации? И, может быть, у Вас есть навскидку какие-то идеи, как учесть соотношения сторон?

Edited March 3, 2016 by Launder

[Igor Schnaider]

А, я понял вас. Мы просто про разные ситуации говорим. Я исходил из того, что есть несколько таких блоков, которые должны быть одинаковыми.

 

 

 

И, может быть, у Вас есть навскидку какие-то идеи, как учесть соотношения сторон?

 

    <div class="box-rotate box-rotate_orientation_vertical">

 

Я бы так делал.

[Launder]

Я исходил из того, что есть несколько таких блоков, которые должны быть одинаковыми.

 

Ну, понятно. Но, Вы обратили внимание, что если у исходного примера просто убрать высоты (всю эту конструкцию height:190px и по 100% у потомков), то вёрстка немного съедет?

 

Я исходил, что задача, прежде всего, учебная, а значит её цель, в первую очередь, увидеть как можно больше градаций применимости. Ведь если размеры должны быть одинаковыми, то и картинки также должны иметь одинаковые размеры, что маловероятно - даже если они примерно одинаковые, соотношения сторон, скорее всего, будут немного различаться.

Кстати, в реальной жизни, наверное, нужно учитывать не только соотношения сторон, но и абсолютные размеры.

 

 

<div class="box-rotate box-rotate_orientation_vertical">

 

Не уловил, идеи, если честно Это что-то из методологии БЭМ?

Мне решение, представляется следующим: у нас картинки могут быть либо слишком высокие, либо слишком широкие. Как измерить это средствами CSS я мало себе представляю... Нет идей?

Так вот, и в том, и в другом случае, нужно просто менять угол "обрезающих дивов". Только в случае широких небольшие углы будут относительно горизонтальной нормали, в случае высоких - относительно вертикальных. Технически соотношение углов плоскостей также, возможно, будет отличаться. В исходном примере это 120 = 60 + 60, а там может оказаться скажем 150 = 100 + 50. Но может и не будет - это я навскидку говорю. Главное тут углы относительно нормалей.

Просто в моём примере, нужно просто внимательно посмотреть геометрию, и это, в общем-то не сложно. И дальше, с небольшими изменениями можно адаптировать пример под задачу.

Вот, кстати, такое решение мне представляется ещё более универсальным. Почему? Да потому, что, как раз, всё что нужно, это в одном месте менять угол, а в двух других ставить угол в два раза меньше. И рамочка получится или более плоской или более вытянутой. Попробуйте В исходной геометрии такого не получится, Вам придётся высчитывать всё относительно нормалей, а тут я привязал углы к горизонтальной нормали и обрезающие дивы двигаются относительно неё.

Edited March 4, 2016 by Launder

[Igor Schnaider]

Не уловил, идеи, если честно

 

Широкая картинка - делаем высоту 100%, высокая - ширину. Ну то есть прийдется в разметке учитывать. Или вообще просто через background вставить с background-size: cover.

 

Вот, раньше делал.

[Launder]

Ну этот пример по логике практически полностью повторяет пример в теме.

[Launder]

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

А вот где прописывать размеры картинки, лучше, наверное, смотреть по ситуации: если это однотипные иконки или размер их стандартизирован, то - через стили, если же картинки могут различаться и размер их в документе заранее не известен, то, видимо, размер их, по-возможности, лучше указать в самом html документа.