Адаптивные изображения с CSS

Рет қаралды 28,922

5 жыл бұрын

Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: webformyself.com/grid/
В этом видео будут рассмотрены некоторые проблемы при работе с адаптивными изображениями на сайте. С указанными проблемами вы, скорее всего, уже сталкивались в своей практике и, скорее всего, в вашем арсенале имеются варианты решения данных проблем.
Данное видео - это просто попытка обобщения некоторых из этих вариантов и попытка показать способы работы с адаптивными изображениями в CSS.

Пікірлер: 30

@user-fj6id3fy9p 4 жыл бұрын

Огромное Спасибо за Вашу работу! Всегда познавательно и интересно!

@Viktorres1 4 жыл бұрын

Спасибо за урок! Возвращаюсь к нему, при необходимости. Очень жизненно-необходимая информация.

@Mitorun 3 жыл бұрын

Вопрос: При вставке кода html карточки как вы изменили отступы-пробелы на табы? И чуть раньше строчку div.container выделили и перенесли на 1 таб влево?

@olegduylda8833 Жыл бұрын

Спасибо большое !

@vladimirmironov5022 5 жыл бұрын

Спасибо, Андрей

@matroskin978 5 жыл бұрын

Пожалуйста :)

@temcodes 5 жыл бұрын

Андрей, спасибо за урок. Скажите, пожалуйста, когда будет продолжение уроков по созданию собственного фреймворка?

@matveysusloparov2374 9 ай бұрын

Можно проще, через '--index' все размеры делал изначально в своем примере, далее css: .photo img {max-width: 100%; max-height: 100%;} и все адаптируется

@rinatvaliullov3247 5 жыл бұрын

Спасибо за урок. Познавательно. Тебе нравятся светлые темы? Может перейдёшь на сторону тьмы, а?)))

@matroskin978 5 жыл бұрын

Пробовал, не мое))) Под настроение могу и темную тему на недельку-другую поставить, но все же светлые мне как-то более привычны.

@Agent-D Жыл бұрын

Wow ! А в grid так же сработает ?

@odikkor5438 5 жыл бұрын

В последнем способе картинка деформируется. Лучше прописать контейнерам background-image: url(...) и background-size: cover. А в каких cms невозможно использовать встроенный style?

@matroskin978 5 жыл бұрын

В любых CMS возможно, я об этом сказал в конце мысли :) в начале 6-ой минуты, процитирую "... но тем не менее он (такой способ) возможен". Вопрос в том, что такой способ из коробки не заложен в большинстве решений. Возьмем тот же компонент карточек Bootstrap, который использован в уроке, в нем выводится именно тег img, а не background блока. Если брать CMS, то можно взять наиболее популярную - WordPress. К записям можно прикреплять миниатюры, которые выводятся функцией the_post_thumbnail, которая, в свою очередь, генерирует тег img. Можно взять и другие CMS, в которых выводятся изображения товара, к примеру. Все они генерируют именно тег img. Изменить это поведение, конечно же, возможно. В случае с WordPress, к примеру, можно заменить получение готового HTML картинки получением ее src для дальнейшего использования, но для этого придется лезть в код. Ну и просто мне не очень нравится вариант с background для таких элементов, как карточка товара или миниатюра поста. Вот для слайдера или фона секции - да, первый вариант только и использую. Надеюсь ответил)

@user-ff3lc1et3u 3 жыл бұрын

Много ценности несет данный урок

@aidenstill7179 5 жыл бұрын

Спасибо! Надеюсь что будет курс по python.

@alenache1 3 жыл бұрын

надо было добавить, что для обджект-фит для интерент експлоера используется полифил

@yajurveda6 5 жыл бұрын

Спасибо за знания! Учусь по вашему курсу "Фреймворк Bootstrap 4". Там этот пример тоже рассматривается. У меня такая ситуация - всё так же , как и в этом примере, но изменяется не изображение, а величина контента параграфа и ... так же кнопочки оказываются на разной высоте. Некрасиво! Как исправить ситуацию?

@yuriiholskyi2289 5 жыл бұрын

Пробуйте "display: flex;" блоку, а кнопкам "margin-top: auto".

@matroskin978 5 жыл бұрын

Пожалуйста) По вопросу. Варианты могут быть разные. Вот вариант с флексами - codepen.io/matroskin8/pen/pmjRJm Другой вариант: назначить родительскому блоку относительное позиционирование, кнопке абсолютное и позиционировать снизу.

@yajurveda6 5 жыл бұрын

@@yuriiholskyi2289 пробую.. спасибо за ответ!

@user-dv9fk1hd3s 2 жыл бұрын

А ещё у background-image более низкий приоритет при загрузке, потому что это оформление, а не контент.

@jasonmark4568 4 жыл бұрын

Class = "img-fluid"

@sergrajes6320 5 жыл бұрын

А если картинка не альбомного формата будет, а например высота 600рх, а ширина 100рх? Клиенту не всегда объяснишь и заставишь выбирать правильные картинки

@darktmdarkness6952 5 жыл бұрын

Сделать свою библиотеку стилей и компонентов для таких случаев, других вариантов нет.

@sergrajes6320 5 жыл бұрын

@@darktmdarkness6952 вопрос, как отображать, если это галерея? Или в разнобой или вырезать одинакового размера центр картинки для фото любой ориентации?

@darktmdarkness6952 5 жыл бұрын

@@sergrajes6320, решение зависит от контекста реализации. условно говоря, вам доступен весь проект + бек, т.е. вы фуллстек. Пишем утилиту для обрезания , растягивания или иной обработки нужной в проекте. По факту она делает простую вещь, какую бы фотку не засунул заказчик в проект, в папку uploads, она попадет только после обработки. Вариант два, заказчике может сразу закинуть туда изображение, значит обработка делается на уровне подтягивания изображения при запросе с клиента. Но самое простое решение, этот сделать свою библиотеку компонентов на клиенте, помучиться неделю, выработать решения для всех исключений, и просто подключать потом в разных проектах. И там не важно галерея это или еще что-то. Этим и отличаются готовые компоненты и библиотеки стилей и компонентов, там сразу есть готовое решение, которое можно пере использовать в тысячах проектов.

@sergrajes6320 5 жыл бұрын

@@darktmdarkness6952 спасибо

@user-dv9fk1hd3s 2 жыл бұрын

Пользователи IE должны страдать