Magic of CSS #3 - Cropping images CSS and SVG

[@Vasya_Stone8oy]

Полезное видео. Спасибо, Анна!

[@АртурАстежев]

Img не надо центрировать через left top и transform. Надо указать height и width 100% от родителя, ну или как нам надо. А object fit сам выровняет его в соответ. С object fit position, котрое по умолчанию итак 50% 50%.т.е. центр

[@lexantonov4467]

Сделал все как вы указали. Вёрстка поехала

[@linked_list_DLL]

@@lexantonov4467 значит верстаешь неправильно. У меня всё работает

[@ГенералФанта-Гиро]

Отличный урок! Сделала пример с масштабированием и сжатием картинки(за основу взяла 2 ситуацию): .box{ position: relative; overflow: hidden; width: 350px; height: 200px; border: 4px solid rgb(194, 194, 194); border-radius: 5%; } .box img{ position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; transform: translate(-30%, -50%); }

[@АнастасияГонтаренко-п5щ]

Огромное спасибо за пример с img! Мне было нужно адаптивное изображение с такой обрезкой. Когда у box в коде из примера вместо высоты я указала padding-top 50% - у меня наконец-таки получилось то, что нужно. Очень помогли)))

[@maxexc6939]

Интересует обрезка изображения под границы svg рисунка полого внутри, Внутренность нужно заливать динамически. Вот задачка интересная с использованием svg- клипирования. Для заполнения только внутри границ рисунка svg. Boзьмите обычное полое сердечко в svg и попробуйте его залить в зависимости от данных на 50 70 90 20%. Самое важное чтоб заливка была только во внутренних границах. Заполняем снизу вверх

[@Webram_YT]

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

[@ЕгорИваницкий-я2п]

Огромное спасибо за ролик, как раз в тему)

[@annblok_webdev]

Отлично 😊

[@linked_list_DLL]

Спасибо вам огромное!!!!

[@PhilippeRigovanov]

Мощно! Спасибо!

[@andreykarolik7455]

Но верно я понимаю, что если по БЭМ, то надо в img сделать class box__img, а вы просто для простоты сделали .box img?

[@annblok_webdev]

Да, тут не БЭМ, потому что это лишь демо. По классам верно пишите 👍

[@alenache1]

юзайте clip-path и сможете вырезать вообще любые фигуры какие захотите

[@Тамилл]

Большое спасибо)) Очень полезно))

[@РуфатМаликов-э4ь]

Спасибо большое. Работает супер.

[@maxcyp3780]

Изначально не правильно брать фулхд изображение и менять ему размер через css. Вес остается прежним. 300х300 весом 3мб - зашквар

[@ciberus]

дак тут тип именно про фронт, офк нужно при обработке UGC контента(картинок) на бэке генерить thumbnail'ы и загружать их на cdn и в зависимости от контекста использовать версии меньше/больше, можно даже указывать несколько source'ов img'а и с помощью media query их отображать.

[@ИванГоденов-и7д]

Полностью поддерживаю. Одним только css или svg тему с обрезкой изображений не решить до конца. Представленные методы являются по сути костылями для конкретных случаев. Я обычно решаю вопрос обрезки и масштабирования изображения на php со всем необходимым функционалом (эскизы, кэширование, привязка к контенту и т.п.).

[@FamilyB-u4s]

проблема не только в том что оно тяжелое а в том что браузеру пересчитывать приходится. в некоторых случаях возможно использовать атрибуты srcset и sizes

[@vladimirmironov5022]

Классно, спасибо

[@appleipad4348]

Спасибо 👍

[@ismanov_es]

Годно, про первые два способа знал, svg особо не использую

[@mikhailivlev]

почему не используете еммит? быстрее же набирается код...

[@lexantonov4467]

А теперь вопрос. Как сделать картинку больше и при том не потерять качество и внешний вид?

[@norkss1]

Что за музыка в конце?) как называться?

[@gundzha]

А как же overflow: hidden?

[@ihabia]

А что в плане поддержки свойства object-fit, мне кажется его только последние версии поддерживают.

[@AlexeyYaricov]

img легко центрируется если родительский элемент display: flex; align-items: center; justify-content: center

[@СергейЛуняк-д5е]

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

[@werbty23455ty]

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

[@annblok_webdev]

Аватарку обычно загружают всего раз и не обновляют, поэтому велик шанс, что автор подберёт нужное изображение для этого :)

[@werbty23455ty]

@@annblok_webdev Согласен, но если на сайте есть функционал обрезки фото то в принципе подойдут все три варианта ))

[@СергейКрук-с1т]

@@annblok_webdev Не понял, в итоге можно отцентрировать изображение внутри окружности? Никак не могу сделать это.

[@artemaltufiev1045]

какой по вашему мнению лучший старт изучения js/jquery(книги отпадают,читать не люблю,даже аудио книги не заходят :/,хочу прочитать несколько книг,но тупо лень)

[@artemaltufiev1045]

и еще вопрос,расскажите в каком-то из видео об python в фронт енд разработке и нужен ли питон фронт эндеру?

[@artemaltufiev1045]

голос у вас,кстати,прекрасный,хотел бы ваши подкасты послушать(подкасты,к счастью, люблю)

[@TheReverOcelot]

@@artemaltufiev1045 Касательно веба, питон - это язык для разработки бэкэндерской логики. Фронтендеру по факту не нужен, но если будешь сидеть на проекте, в котором будет Питон задействован в качестве бэка, то основы может и стоит знать. В общем в приоритет не ставь.

[@TheReverOcelot]

Будешь лениться читать - нормальным разработчиком не станешь. Если знаешь английский - смотри Traversy Media, если не знаешь - то learn.javascript.ru, можешь курсы на hexlet.io приобрести и учиться онлайн.

[@artemaltufiev1045]

TheReverOcelot спасибо за советы

[@schtv3990]

для круга мне кажется такой вариант удобнее и проще: codepen.io/Schmarotzer/pen/aMzeWb

[@MAPC2012]

Ага. Но на движке не всегда нужный код в css вставишь...

[@SuperBerence]

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

[@VVllaadd93]

Cпасибо, но тег 'object-fit' не работает для старых браузеров ( caniuse.com/#feat=object-fit

[@timurkhudiyev]

kzbin.info/www/bejne/l4utfoKMpbKbqsU тут глянь, парень все доходчиво объясняет какие подводные камни в разных способах и их решение

[@VVllaadd93]

@@timurkhudiyev Видел, но об полифилах тут не слова

[@whatthepeople]

@@VVllaadd93 а смысл поддерживать старые браузеры в новых сайтах?

[@Spencerrrr]

НАЧНИ КУРС ЛЕНДИНГ С НУЛЯ! Успехов и роста! )

[@annblok_webdev]

Есть такой tpverstak.ru/super-start/

[@ant3413]

Нарисовал картинку в илюсстраторе,вставляю в html и у меня он огромный,точнее сама картинка среднея,а белая зона огромная!

[@annblok_webdev]

Artboard обрезали?

[@ant3413]

@@annblok_webdev Нет,подскажите пожалуйста что это,и как его отрезать.

[@annblok_webdev]

@@ant3413 Инструмент в иллюстраторе

[@ant3413]

@@annblok_webdev Спасибо,Вы мне очень помогли))

[@artemaltufiev1045]

сделайте следующий видос на тему : «какие функции фотошопа нужны фронтэндэру и может ли xdesign заменить фотошоп?»

[@annblok_webdev]

По ФШ уже есть статья tpverstak.ru/photoshop-dlya-verstaka/

[@artemaltufiev1045]

@@annblok_webdev спасибо

[@alexmakarov2504]

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

[@ДмитрийГорбачёв]

IE11 не поддерживает object-fit - а это уже критично.

[@mit7871]

Критично, если требуется поддержка ei 11

[@ДокторнаПриколе]

Умно очень