Ето как да добавите отзивчиви дизайнерски изображения, използващи CSS
Погледнете популярните уеб сайтове днес и едно проектирано лечение, което със сигурност ще видите, е огромно изображение на екрана. Едно от предизвикателствата при добавянето на тези изображения се дължи на най-добрата практика, че уебсайтовете трябва да отговарят на различни размери и устройства на екрана - подход, известен като отзивчив уеб дизайн .
Тъй като оформлението на уебсайта Ви се променя и мащабира с различни размери на екрана, така и тези фонови изображения трябва да мащабират размера си по съответния начин.
В действителност, тези "течни изображения" са един от ключовите елементи на отзивчивите уеб сайтове (заедно с течна мрежа и медийни заявки). Тези три фигури са от основно значение за отзивчивия уеб дизайн от самото начало, но въпреки това винаги е било лесно да добавите входящи изображения, отговарящи на сайта (вградените изображения са графиките, които са кодирани като част от HTML маркировката), правейки същите с фоновите изображения (които са оформени в страницата, използващи свойствата на фон CSS) отдавна са послужили като сериозно предизвикателство за много уеб дизайнери и разработчици на фронт. За щастие добавянето на собственост "размер на фона" в CSS направи това възможно.
В отделна статия разгледах как да използвам размера на фона на собствеността на CSS3, за да разтеглям изображения така, че да се поберат в прозорец, но има още по-добър и по-полезен начин за разполагане за тази собственост. За да направите това, ще използваме следната комбинация от свойства и стойности:
размер на фона: покритие;
Ключовата ключова дума "собственост" указва на браузъра да мащабира изображението така, че да се побере в прозореца, независимо от това колко голям или малък е този прозорец. Изображението се мащабира, за да покрие целия екран, но оригиналните пропорции и съотношението се запазват непокътнати, което предотвратява изкривяването на изображението.
Изображението се поставя в прозореца колкото е възможно по-голямо, така че цялата повърхност на прозореца да е покрита. Това означава, че няма да имате празни петна на страницата си или никакви изкривявания на изображението, но също така означава, че част от изображението може да бъде отрязано в зависимост от съотношението на екрана и въпросното изображение. Например, краищата на изображение (горно, долно, ляво или дясно) могат да бъдат отрязани на изображенията в зависимост от това кои стойности използвате за собствеността на фона. Ако ориентирате фон в "горния ляв ъгъл", излишъкът от изображението ще излезе от долната и от дясната страна. Ако центрирате фоновото изображение, излишъкът ще излезе от всички страни, но тъй като това излишък се разпространи, въздействието върху която и да е страна ще бъде по-малко.
Как да използвате размера на фона: cover;
Когато създавате фоновото си изображение, добра идея е да създадете изображение, което е доста голямо. Докато браузърите могат да направят изображението по-малко, без забележимо въздействие върху визуалното качество, когато браузърът увеличава размера на изображението до размер, по-голям от оригиналните му размери, визуалното качество ще се влоши и ще се разсее. Недостатъкът е, че страницата Ви отнема хита за представяне, когато изпращате гигантски изображения на всички екрани.
Когато го направите, се уверете, че правилно подготвяте тези изображения за скорост на изтегляне и доставка в мрежата . В крайна сметка трябва да намерите щастливата среда между достатъчно голям размер и качество на изображението и разумен размер на файла за скоростите на изтегляне.
Един от обичайните начини за използване на скалиране на фоновите изображения е, когато искате изображението да заема пълния фон на страницата, независимо дали тази страница е широка и се разглежда на настолен компютър или много по-малка и се изпраща на мобилен, мобилен устройства.
Качете изображението в уеб хоста си и го добавете в CSS като фоново изображение:
фоново изображение: URL (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
background-position: Център център;
фоново прикачване: фиксирано;
Добавете първо CSS на браузъра:
-webkit-background-size: cover;
-можност-размер на фона: покритие;
-о-фонов размер: покритие;
След това добавете свойството CSS:
размер на фона: покритие;
Използване на различни изображения, които отговарят на различни устройства
Докато отзивчивият дизайн за настолен или лаптоп опит е важен, разнообразието от устройства, които могат да имат достъп до мрежата се е увеличило значително и по-голямо разнообразие от размери на екрана идва с това.
Както споменахме по-горе, зареждането на много голямо изображение на отзивчиво фоново изображение на смартфон, например, не е ефективен дизайн или дизайн, който се съобразява с честотната лента.
Научете как можете да използвате заявки за мултимедия, за да показвате изображения, които са подходящи за устройствата, на които ще се показват, и допълнително да подобрите съвместимостта на уебсайта си с мобилни устройства.
Оригинална статия на Дженифър Кринин. Редактирано от Джереми Жирар 9/12/17