Как да направите адаптивни изображения и фонове в css

Тъй като говорим за адаптивно оформление, трябва да се уверите, че вашите снимки и фонови изображения изглеждат добре на всички разделителни способности на екрана. Как да направите отзивчиви изображения и фонови изображения в css?

Отзивчиви изображения - img таг

Първо, нека да разберем какво да правим с тези снимки, които са вмъкнати чрез img тага. Като цяло, при адаптиране на шаблон за мобилни устройства, може да има само 3 проблема с тях (поне сега ми идват на ум). Ето ги и тях:

Когато ширината на прозореца се намали, картината просто не се вписва в него. Третиране: използвайте за блока, в който е поставено изображението, максималната ширина, а за самото изображение също задайте максималната ширина на 100% и автоматичната височина, която ще бъде изчислена въз основа на пропорциите. като това: img
Вторият проблем е, че при силно стесняване на малки екрани изображенията стават твърде малки, така че са почти невидими. Лечение: предписвайте минимална ширина на изображенията. Като правило, това е 250-300 пиксела. Снимките просто няма да станат по-малки и това е добре.
Е, всъщност, още един проблем е свързан с картини, които имат обвивка. При определена ширина може да се случи изображението да заеме почти цялата налична ширина и да има много малко текст отляво или отдясно. Съответно в такъв раздел трябва да направите медийна заявка и свойството float на изображението. Тоест, настройте го на float: none.

Адаптивен фон - фоново изображение

За да адаптирате фоновото изображение, за да пасне на всички екрани, препоръчвам да използвате css свойството background-size. Той има следните стойности, които може да ни подхождат:

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

Като цяло, всички съветват да използвате background-size: cover . Така вашият фон ще се простира от едната страна и ще запази пропорциите от другата. Има по-безпроблемен вариант, но при него пропорциите могат да бъдат нарушени. Това е размер на фона: 100% 100% . Това означава, че изображението ще бъде разтегнато със 100% както по ширина, така и по височина на своя блок, независимо от неговия размер, но може да бъде силно изкривено, за да запълни цялата област.