Adaptive образ за обекта

Снимки в адаптивния (адаптиране 🙂) дизайн, както е известно, е един от най-трудните страни. Трябва да се помисли за всеки елемент, че всичко изглеждаше добре на различни устройства и екрани на големи широки екрани, за да екраните в 320 пиксела. Тъй като "квадрат" мониторите си отиват, те постепенно се заменя с широкоекранни телевизори, монитори и таблетки. Изображенията трябва да бъдат компресирани и опъната, съответно.

общото решение

Като правило, преди да използвате следния CSS код, за да направи адаптивни на изображението:

Ние използваме макс ширина собственост: 100%, така че снимката никога няма да излиза извън рамките на родителския контейнер (блока). Ето защо, когато промяната на блока, в който разделителната способност на изображението на изображение се променя. А височина имот: автоматичен; Той е отговорен за гарантиране, че пропорционалността на страните остава образ, когато мащаб.

Нова решение на проблема (адаптивно изображение) -

- това е нов маркер, който се появи в версия на HTML5. Тя ви позволява да правите снимки на адаптивна и принцип на работа е подобен на тагове

Тя ви позволява да зареждате различни изображения, в зависимост от условията:

Резултати от медийни заявки (медии заявки);

Плътностите на пиксела.

Зареждане на най-оптимално и целесъобразно образ;
Изображението може да бъде отрязано, в зависимост от размера на екрана;
Заредете изображения едроразмерни за висока резолюция монитори.

Как се етикет ?

Помислете стъпки:

Създаване на отваряне и затваряне на маркера .

Вътре в този етикет, пишем най-много тагове . колкото е необходимо условия.

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

С srcset атрибут указва пътя към изображението.

Добавянето на допълнителна маркера на изображение .

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

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

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

използването на

Този маркер е добре поддържаните браузъри Chrome, Opera и Firefox. В бъдеще се планира, че този етикет ще се използва широко.

След като изтеглите файла picturefill.js го свързват между маркерите :

Този етикет се зарежда с помощта на този плъгин ще работи с някои ограничения.

Адаптивност сайт се превърна в приоритет, когато е създаден. В крайна сметка, правото да се създаде структура, няма нужда от отделна създаване мобилен сайт. Тъй като самият шаблон ще се приспособи към подходящата разделителна способност. 🙂

общото решение

Нова решение на проблема (адаптивно изображение) -

Как се етикет ?

използването на

Свързани статии