Адаптивные изображения с CSS
ฝัง
- เผยแพร่เมื่อ 7 พ.ค. 2019
- Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: webformyself.com/grid/
В этом видео будут рассмотрены некоторые проблемы при работе с адаптивными изображениями на сайте. С указанными проблемами вы, скорее всего, уже сталкивались в своей практике и, скорее всего, в вашем арсенале имеются варианты решения данных проблем.
Данное видео - это просто попытка обобщения некоторых из этих вариантов и попытка показать способы работы с адаптивными изображениями в CSS.
Огромное Спасибо за Вашу работу! Всегда познавательно и интересно!
Спасибо за урок! Возвращаюсь к нему, при необходимости. Очень жизненно-необходимая информация.
Вопрос: При вставке кода html карточки как вы изменили отступы-пробелы на табы? И чуть раньше строчку div.container выделили и перенесли на 1 таб влево?
Спасибо большое !
Спасибо, Андрей
Пожалуйста :)
Андрей, спасибо за урок. Скажите, пожалуйста, когда будет продолжение уроков по созданию собственного фреймворка?
Спасибо за урок. Познавательно. Тебе нравятся светлые темы? Может перейдёшь на сторону тьмы, а?)))
Пробовал, не мое))) Под настроение могу и темную тему на недельку-другую поставить, но все же светлые мне как-то более привычны.
Можно проще, через '--index' все размеры делал изначально в своем примере, далее css: .photo img {max-width: 100%; max-height: 100%;} и все адаптируется
В последнем способе картинка деформируется.
Лучше прописать контейнерам background-image: url(...) и background-size: cover.
А в каких cms невозможно использовать встроенный style?
В любых CMS возможно, я об этом сказал в конце мысли :) в начале 6-ой минуты, процитирую "... но тем не менее он (такой способ) возможен".
Вопрос в том, что такой способ из коробки не заложен в большинстве решений. Возьмем тот же компонент карточек Bootstrap, который использован в уроке, в нем выводится именно тег img, а не background блока. Если брать CMS, то можно взять наиболее популярную - WordPress. К записям можно прикреплять миниатюры, которые выводятся функцией the_post_thumbnail, которая, в свою очередь, генерирует тег img. Можно взять и другие CMS, в которых выводятся изображения товара, к примеру. Все они генерируют именно тег img. Изменить это поведение, конечно же, возможно. В случае с WordPress, к примеру, можно заменить получение готового HTML картинки получением ее src для дальнейшего использования, но для этого придется лезть в код. Ну и просто мне не очень нравится вариант с background для таких элементов, как карточка товара или миниатюра поста. Вот для слайдера или фона секции - да, первый вариант только и использую. Надеюсь ответил)
Спасибо за знания! Учусь по вашему курсу "Фреймворк Bootstrap 4". Там этот пример тоже рассматривается. У меня такая ситуация - всё так же , как и в этом примере, но изменяется не изображение, а величина контента параграфа и ... так же кнопочки оказываются на разной высоте. Некрасиво! Как исправить ситуацию?
Пробуйте "display: flex;" блоку, а кнопкам "margin-top: auto".
Пожалуйста)
По вопросу. Варианты могут быть разные. Вот вариант с флексами - codepen.io/matroskin8/pen/pmjRJm
Другой вариант: назначить родительскому блоку относительное позиционирование, кнопке абсолютное и позиционировать снизу.
@@yuriiholskyi2289 пробую.. спасибо за ответ!
надо было добавить, что для обджект-фит для интерент експлоера используется полифил
Много ценности несет данный урок
Спасибо! Надеюсь что будет курс по python.
Wow ! А в grid так же сработает ?
А ещё у background-image более низкий приоритет при загрузке, потому что это оформление, а не контент.
Class = "img-fluid"
А если картинка не альбомного формата будет, а например высота 600рх, а ширина 100рх? Клиенту не всегда объяснишь и заставишь выбирать правильные картинки
Сделать свою библиотеку стилей и компонентов для таких случаев, других вариантов нет.
@@darktmdarkness6952 вопрос, как отображать, если это галерея? Или в разнобой или вырезать одинакового размера центр картинки для фото любой ориентации?
@@sergrajes6320, решение зависит от контекста реализации. условно говоря, вам доступен весь проект + бек, т.е. вы фуллстек. Пишем утилиту для обрезания , растягивания или иной обработки нужной в проекте. По факту она делает простую вещь, какую бы фотку не засунул заказчик в проект, в папку uploads, она попадет только после обработки. Вариант два, заказчике может сразу закинуть туда изображение, значит обработка делается на уровне подтягивания изображения при запросе с клиента. Но самое простое решение, этот сделать свою библиотеку компонентов на клиенте, помучиться неделю, выработать решения для всех исключений, и просто подключать потом в разных проектах. И там не важно галерея это или еще что-то. Этим и отличаются готовые компоненты и библиотеки стилей и компонентов, там сразу есть готовое решение, которое можно пере использовать в тысячах проектов.
@@darktmdarkness6952 спасибо
Пользователи IE должны страдать