Форум Сайтостроение Веб-строительство

Как избавиться от зависимости от размера картинки/блока?

mendel
На сайте с 06.03.2008
Offline
183
mendel
1026

Нашел пачку примеров различных эффектов на картинках при наведении курсора.

https://codepen.io/nxworld/pen/ZYNOBZ

Как оказалось это илюстрации к статье на японском.

Я переписал этот код чтобы он больше походил на библиотеку а не на просто примеры к статье.

Убрал необычные теги вроде figure которые по сути выполняли функцию дива с отдельным классом, переписал чтобы класс эффекта указывать не на родителя а на соответствующий див, переписал имена классов в более читабельные, удалил некоторые частично дублирующиеся функции, вынес отдельно функции скорости эффекта и т.п. В общем провел рефакторинг.

Получилось вот так: https://site04.8kb.ru/

Ну и сам CSS: https://site04.8kb.ru/files/hoverEffect.css

У половины эффектов используется изменение размера картинки, так что приходится строго указывать размер контейнера, чтобы вылезающее обрезалось overflow: hidden;

Это неудобно для резиновой верстки.

Но в голову не приходит как это сделать.

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

Если картинку сделать зависимой от ширины блока (100% при обычной, 120% при увеличении и т.п.), а ширину блока ограничивать окружающим контекстом (например шириной колонки в бутстрапе), то что делать с высотой? Нужно сделать чтобы высота была пропорционально. Причем пропорционально содержащейся внутри картинке, т.е. авто не прокатит, картинка то у нас увеличивается, а див должен оставаться на месте.

Шутку любишь над Фомой, так люби и над собой. (с) народ. Бесплатные списки читабельных(!) свободных доменов (http://burzhu.net/showthread.php?t=2976) (5L.com) Сайты, All inclusive. 5* (/ru/forum/962215)
I2
На сайте с 07.03.2015
Offline
38
indenger20
#1

Тут либо js-ом задавать ширину и высоту картинки.

Либо css свойством objec-fit:cover

Качественная верстка PSD макетов (/ru/forum/974524)
mendel
На сайте с 06.03.2008
Offline
183
mendel
#2
indenger20:
Либо css свойством objec-fit:cover

Не улавливаю как вы имеете ввиду.

По идее так можно избавиться от контейнера, хотя не факт что все 12 эффектов это поддержат, но вроде да, можно будет. Но все равно придется жестко указывать размер. Не размер дива так размер картинки.

I2
На сайте с 07.03.2015
Offline
38
indenger20
#3

Если я правильно все понял, то вот о чем я.

1. http://prntscr.com/gd90ig

2. http://prntscr.com/gd911q

Теперь ширина блока с картинкой зависит от ширины родителя.

И если задать фикс высоту/ширину родителю, то картинка сохранит свои пропорции.

mendel
На сайте с 06.03.2008
Offline
183
mendel
#4
indenger20:
И если задать фикс высоту/ширину родителю, то картинка сохранит свои пропорции.

Собственно от этого я и хочу избавиться.

У меня для включения эффекта нужно вот такой код:


<style>
     .hoverEffectSize {
          width: 300px;
          height: 200px;
     }
</style>
<div class="hoverEffectSize hoverEffect hoverSpeedLow hoverZoomIn">
     <img src="/files/pic01.jpg" />
</div>

А я хочу чтобы код был вот такой:


<div class="hoverEffect hoverSpeedLow hoverZoomIn">
     <img src="/files/pic01.jpg" />
</div>

В идеале хочется чтобы просто на картинку вешаешь эти классы (ну или в див оборачиваешь с этими классами, не суть), и и картинка растягивается на всю ширину блока, а по высоте оказывается пропорционально ширине, без указывания размера блока.

Если бы картинка была без эффектов, то можно было бы указать ширину 100%, а высоту авто. Но с эффектами так не получается. Хотя если я уберу див и буду делать трансформацию обжект-фитом и т.п., то может и получится, надо пробовать... что-то торможу я похоже. Надо проверять как авто будет себя вести.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий