Урок за CSS Responsive Image: Как да направим изображенията отзивчиви с CSS

По-голямата част от днешните уебсайтове са отзивчиви. И ако трябва да центрирате и подравните изображението на този сайт, трябва да научите как да направите изображенията течни или отзивчиви с CSS.

Пуснах видео с урок, което обяснява как да създадете отзивчив уебсайт стъпка по стъпка преди няколко седмици. Във видеото направихме отзивчиво изображение. Но в тази публикация бих искал да дам малко повече подробности за това как да направя изображенията отзивчиви.

Също така ще научите някои от основните проблеми, които могат да възникнат, когато се опитвате да направите изображенията отзивчиви - и аз ще се опитам да обясня как да ги разреша.

Как да направим изображенията отзивчиви с CSS

Трябва ли да използвам относителни или абсолютни единици?

Направата на флуид на изображението или отзивчивост всъщност е доста проста. Когато качите изображение на уебсайта си, то има ширина и височина по подразбиране. Можете да ги промените и двете с CSS.

За да направите изображението отзивчиво, трябва да придадете нова стойност на неговото свойство width. Тогава височината на изображението ще се коригира автоматично.

Важното е да знаете, че винаги трябва да използвате относителни единици за свойството width като процент, а не абсолютни като пиксели.

img { width: 500px; }

Например, ако дефинирате фиксирана ширина от 500px, вашето изображение няма да реагира - защото единицата е абсолютна.

img { width: 50%; }

Ето защо вместо това трябва да присвоите относителна единица като 50%. Този подход ще направи вашите изображения течни и те ще могат да се преоразмеряват независимо от размера на екрана.

Трябва ли да използвам медийни заявки?

Един от въпросите, които най-често ме задават, е дали трябва да използвате медийни заявки или не.

Медийна заявка е друга важна характеристика на CSS, която помага да се направи уебсайтът отзивчив. Няма да навлизам в повече подробности тук, но можете да прочетете другата ми публикация по-късно, за да научите как да използвате медийни заявки по-подробно.

Отговорът на този въпрос е: „зависи“. Ако искате изображението ви да има различни размери от едно устройство на друго, тогава ще трябва да използвате медийни заявки. В противен случай няма да го направите.

Сега за този пример вашето изображение има 50% ширина за всякакъв вид екран. Но когато искате да го направите в пълен размер за мобилни устройства, трябва да получите помощ от медийни заявки:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Така че въз основа на правилото за медийни заявки, всяко устройство, по-малко от 480px, ще вземе пълния размер на ширината на екрана.

Можете също да гледате видео версията на тази публикация по-долу:

Защо свойството max-width не е чудесно?

Друг начин, по който разработчиците могат да правят отзивчиви изображения, е свойството max-width. Това обаче не винаги е най-добрият метод за използване, защото може да не работи за всеки вид размер на екрана или устройство.

Първото нещо, което трябва да разберем, преди да продължим с пример, е какво точно прави свойството max-width.

Свойството max-width задава максимална ширина за елемент, което не позволява ширината на този елемент да бъде по-голяма от стойността му max-width (но може да бъде и по-малка).

Например, ако изображението има ширина по подразбиране 500px и ако размерът на екрана ви е само 360px, тогава няма да можете да видите цялото изображение, защото няма достатъчно място:

img { max-width: 100%; width: 500px; // assume this is the default size }

Следователно можете да дефинирате свойството за максимална ширина за изображението и да го зададете на 100%, което намалява изображението от 500px до пространството от 360px. Така ще можете да видите цялото изображение на екран с по-малък размер.

Хубавото е, че тъй като използвате относителна единица, изображението ще бъде плавно във всяко устройство, по-малко от 500px.

За съжаление размерът на екрана ще стане малко по-голям от 500px, но изображението няма, защото има 500px по подразбиране ширина. Този подход ще наруши отзивчивостта на изображението.

За да поправите това, трябва отново да използвате свойството width, което прави свойството max-width безполезно.

Ами височините?

Друг често срещан проблем, който може да срещнете, е свързан със свойството височина. Обикновено височината на изображението автоматично се преоразмерява, така че не е нужно да присвоявате свойство за височина на вашите изображения (тъй като това прекъсва изображението).

Но в някои случаи може да се наложи да работите с изображения, които трябва да имат фиксирана височина. Така че, когато присвоите фиксирана височина на изображението, то пак ще реагира, но няма да изглежда добре.

img { width: 100%; height: 300px; }

За щастие има още едно свойство, което CSS предлага, за да реши този проблем ...

Решение: Свойството, подходящо за обекта

За да имате по-голям контрол върху вашите изображения, CSS предоставя друго свойство, наречено object-fit. Нека използваме свойството object-fit и присвоим стойност, която ще направи изображението ви да изглежда по-добре:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Ако е необходимо, можете също да използвате свойството object-position (в допълнение към fit-fit), за да фокусирате върху определена част от изображението. Много хора не са наясно със свойството на обект, но може да бъде полезно да се решат тези проблеми.

Надявам се тази публикация да ви е помогнала да разберете и разрешите проблемите си с отзивчиви изображения. Ако искате да научите повече за уеб разработката, не се колебайте да разгледате моя канал в Youtube.

Благодаря ви, че прочетохте!