Адаптивна зміна розмірів зображення в HTML. Адаптивні зображення за допомогою CSS. Визначення пропускної спроможності

Часто виникає питання про те, як розмістити одну форму на всіх сторінках вашого Zend програми. Допустимо, я хочу розмістити форму підписки у файлі layout.phtml для того, щоб вона розташовувалася на кожній сторінці. Команда layout->content() працює з діями та контролерами... Як же реалізувати те, що нам потрібно?

Одне з розв'язків цього завдання - створення помічника дії.

Почнемо з налаштування ZF програми:

$ zf create project layoutform $ cd layoutform $ zf enable layout

Очистіть файл application/views/scripts/index/index.phtml і вставте щось на зразок цього:

application/views/scripts/index/index.phtml:

This is the home page

Тепер можемо розпочинати.

Форма

Створимо нову форму:

$ zf create form signup

А також поля, які нам необхідні:

application/forms/Signup.php:

Class Application_Form_Signup extends Zend_Form ( public $processed = false; public function init() ( $this->addElement("text", "name", array("label" => "Name", "required" => true, " validators" => array(array("StringLength", false, array("max"=>75)),),)); $this->addElement("text", "email", array("label" = > "Email", "required" => true, "validators" => array(array("StringLength", false, array("max"=>150)), "EmailAddress",),)); >addElement("submit", "go", array("label" => "Sign up",)); ) )

Форма у нас є. Залишилось її вивести.

Помічник дії

Ми використовуємо помічник дії, щоб ініціалізувати форму.

Додайте рядок до application.ini:

application/configs/application.ini:

Resources.frontController.actionhelperpaths.Application_Controller_Helper = APPLICATION_PATH "/controllers/helpers"

Тепер система знає де шукати помічники дій, тож можемо йти далі:

application/Bootstrap.php:

bootstrap("frontController"); $signup = Zend_Controller_Action_HelperBroker::getStaticHelper("Signup"); Zend_Controller_Action_HelperBroker::addHelper($signup); )

Помічник дії буде виглядати так:

application/controllers/helpers/Signup.php:

getActionController()->view; $form = новий Application_Form_Signup(); $request = $this->getActionController()->getRequest(); if($request->isPost() && $request->getPost("submitsignup")) ( if($form->isValid($request->getPost())) ( $data = $form->getValues() // process data $form->processed = true;)) $view->signupForm = $form; )

Тут нічого особливого нема. Просто зверніть увагу на клас батька.

Помічник виду

Для того щоб відобразити форму, створимо помічник виду, який виглядатиме таким чином:

application/views/helpers/SignupForm.php:

Sign up for our newsletter

Thank you for signing up

"; ) else ( $html .= $form->render(); ) return $html; ) )

Все, що нам залишилося, так це зробити висновок форми в layout.phtml:

application/layouts/scripts/layout.phtml:

headMeta()->prependHttpEquiv("Content-Type", "text/html; charset=UTF-8"); $this->headTitle("Layout form test"); echo $this->doctype(); ?> headMeta()->setIndent(4); ?>headTitle()->setIndent(4); ?>

Вийшло

От і все. Ми досягли тієї функціональності, яку задумали.

Одним з основних завдань при адаптивній верстці є масштабування зображень (у тому числі фонових) таким чином, щоб вони коректно відображалися на пристроях з різними роздільними здатністю екранів.

З картинками у тезі imgвсе просто: при встановленні ширини у відсотках висота масштабуватиметься автоматично. До фоновим зображенням такий спосіб застосувати не можна.

Цей трюк полягає у встановленні значення у відсотках відступів ( padding) Елементу. Вперше спосіб опублікований у старій статті блогу A List Apart, проте він досі добре працює.

Припустимо, що є фонове зображення 800 на 450 пікселів, і потрібно зробити його тлом із фіксованим співвідношенням сторін – 16:9. У коді нижче для відступів використовується px, але все буде працювати і з em. Також є HTML5 елемент figure, для його коректної роботи у старих браузерах можна використовувати HTML5 shiv.

Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Додаємо тло

Div.column ( /* The background image повинен бути 800px wide */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg), background-size: cover, -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/ 8 */ )

Припустимо, що є велике фонове зображення, яке чудово виглядає на робочому столі. Але на мобільному пристрої воно буде надто дрібним, тому правильним рішенням стане зменшення ширини фону.

Наприклад, картинка шириною 800 на 200 пікселів (4:1) на маленькому екрані, при ширині 300 пікселів, повинна зменшуватися до 150 пікселів (2:1). Порахуємо атрибути heightі padding-top:

На малюнку показано співвідношення сторін фонового зображення за різної ширини. Нахил графіка (slope) відповідає атрибуту padding-top, Початкова висота (start height) - атрибуту height. У результаті виходить код:

Div.column ( /* The background image must be 800px wide */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120px; /* start height */ background- image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )

Використання SCSS для розрахунку

/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); large - $height-small) / ($width-large - $width-small), $height: $height-small - $width-small * $slope; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) від 4:1 at 800px to 2:1 at 300px.*/ @include fluid-ratio(800px 200px, 300px 150px);

Адаптивне зображеннячасто вкрай необхідно для якісних проектів, але його реалізація буває скрутна. До того ж при верстці під мобільні пристрої, під які необхідно мати урізану версію картинки.

Як це правильно реалізувати на HTML5?

Будь-який якісний адаптивний сайт не може обійтися без гумових зображень, які відповідають усім вимогам. На даний момент існує кілька способів, які можуть вирішувати це питання. І лише один з них є функціональним і відповідає всім стандартам, але досить рідко використовується. Раніше ми розглядали, які здатні задати будь-якому елементу необхідні правила, залежно від розміру екрана. Існує чудовий його аналог, який я раджу вам використати.

Для початку, давайте почергово розглянемо та порівняємо можливі варіантивирішення цієї проблеми.

Як робили раніше

Даний спосіб створення адаптивного зображення є дієвим та якісним, у якому навіть немає необхідності використання медіа-запитів. Код має всього 2 рядки, які виконують свої функції на ура:

img (max-width: 100%; height: auto; )

Рядок 2 — задається правило, згідно з яким максимальна ширина зображення дорівнюватиме ширині екрана пристрою. Таким чином, ширина зображення змінюватиметься, залежно від розміру екрана.

Рядок 3 - згідно з цим правилом, при зміні max-width, висота картинки буде змінюватися пропорційно її ширині. Власне, щоб картинка мала задані пропорції.

Як я вже сказав - залізний варіант, для швидкого завдання адаптивності зображення, але відсутня можливість створення зображення під мобільні пристрої, без завдання додаткових властивостей.

Як роблять зараз за допомогою HTML5

Сучасне рішення для створення адаптивного зображення має кілька істотних переваг, які заслуговують на увагу:

• адаптивність зображення;
• автоматичний підбір оптимальної картинки;
• можливість обрізання зображення;
• не потрібні css-правила;
• валідний код.

Всі ці переваги містить у собі Його синтаксис може здатися незвичайним, але як тільки ви до нього звикнете - зрозумієте, що це справді круто:

Всі елементи, що звично обрамляються в тег, в якому є:

• img- всім звичний тег зображення;
• source— новий тег, в якому ми записуємо умову для певного розміру екрана та відповідне зображення. Таких тегів має бути стільки, скільки умов ми хочемо створити.

Крім цього, існує новий для нас тег: srcset— не варто лякатися, він необхідний лише завдання шляху до зображення.

Останній тег media має роль медіа-запиту. Як видно з прикладу, синтаксис запису аналогічний до того, що ми записуємо в CSS — нічого складного.

Як медіа-запити можна використовувати:

• max-width;
• min-width;
• max-height;
• min-height;
• orientation.

Таким чином, є можливість підвантажувати необхідні картинки для будь-якої орієнтації та розміру екрану:

Висновок

За допомогою цих 2 способів можна зробити адаптивне зображення на всіх видах пристроїв, але як ми вже з'ясували тег Має більше можливостей та переваг, ніж його аналог. Я раджу користуватися саме другим варіантом, тому що його синтаксис виглядає дуже приємно і не вимагає внесення змін до CSS.

Однак, для кожного випадку слід підбирати варіант індивідуально, залежно від вимог та можливостей у створенні.

Адаптивними, всі вони різняться і за складністю, і рівнем підтримки браузерами. Прикладом складного шляху реалізації адаптивних картинок є використання атрибуту srcset , для якого потрібно кілька зображень, більше розмітки, а також залежність від підтримки браузерами.

Давайте відкинемо зайву тягомотину, сучасні специфікації дозволяють нам зробити зображення, що використовуються на сторінках сайтів, гнучкими і коректно відображаються на екранах різних пристроїв користувача, для цього достатньо використовувати лише кілька властивостей з обойми CSS.

Приготував приклади кількох варіацій виконання адаптивних зображень, одиночна картинка, зображення у двох і більше колонках, а також приклад використання фонового великого зображення з гарантованою адаптивністю. Всі варіанти ґрунтуються на використанні відсоткових значень для властивості width (ширини) та значенні auto для властивості height (висоти) зображень.

img ( width: 100%; height: auto; )

Базові значення адаптивного зображення

Почнемо з розгляду базового прикладу, коли нам необхідно зробити одиночні картинки, що використовуються в записах, або інших окремих блоках, повністю адаптивними.
Наприклад, ми маємо контейнер, якому ми задали базову ширину width: 96%; і виставили максимальну ширину max-width: 960px; У цьому блоці нам необхідно вивести адаптивне зображення.
Для цього елементу всередині контейнера визначаємо ширину в 100%, так, що його ширина завжди дорівнюватиме ширині контейнера, незалежно від розміру області перегляду. Висоту відповідно переводимо в автоматичний режим, в результаті зображення буде змінюватися пропорційно.

div.container ( width: 96%; max-width: 960px; margin: 0 auto; /* центруємо основний контейнер */ ) img ( width: 100%; /* ширина картинки */ height: auto; /* висота картинки * / )

Зверніть увагу, що елемент буде адаптивним, навіть якщо були задані фіксовані значення HTML-атрибутів ширини та висоти безпосередньо у розмітці.

Адаптивні зображення у колонках

Іноді ми хочемо бачити зображення збудовані в ряд пліч-о-пліч, або наприклад, у вигляді сітки, для організації найпростішої галереїкартинок.
Для цього необхідно лише внести невеликі зміни в код, який використовували вище, перше, це зменшити ширину властивість width і задати елементу значення inline-block для характеристики display , тобто. зробити його вбудованим.
Давайте розглянемо дві схеми компонування: розташування картинок у дві колонки і макет з трьох стовпців.

1. Макет зображень у дві колонки
Для двох-колонкового макету зображень, ми можемо встановити ширину 48%, або приблизно половину контейнера. Не встановлюємо значення 50%, щоб були бічні відступи.

img (width: 32%; display: inline-block; )

Умовне розміщення адаптивних зображень

У прикладі, ми розглянемо варіант використання адаптивних картинок з різною розстановкою залежно від пристроїв перегляду, тобто. при перегляді на смартфонах зображення відображатимуться в одну колонку, дві колонки на планшетах, і вибудовуватимуться в чотири колонки на великих екранах.
Для реалізації задуманого, застосуємо медіа-запити @media, вказавши тип носія, для якого застосовуватиметься те чи інше максимальне значення ширини зображень max-width .

/* Для невеликих пристроїв (смартфони) */ img ( max-width: 100%; display: inline-block; ) /* Для середніх пристроїв (планшети) */ @media (min-width: 420px) ( img ( max- width: 48%; ) ) /* Для великих пристроїв (ноути, пк) */ @media (min-width: 760px) ( img ( max-width: 24%; ) )

Все досить просто, чи не так? Ідея з медіа-запитами відмінна, що вже досить давно і широко використовується. Показані в прикладі параметри, добре працюють саме з даним макетом, як поведуться в інших конструкціях, варто ретельно перевіряти, так що...

Адаптивне зображення на всю ширину екрану

Для того, щоб зробити широкоформатні адаптивні зображення, які заповнюють 100% розміру вікна перегляду, необхідно просто видалити властивість максимальної ширини контейнера max-width (значення 960px) і встановити йому ширину width 100%. Ширина зображення також виставляється в значення 100%.

Container ( width: 100%; ) img ( width: 100%; )

Незважаючи на те, що дана техніка дуже проста у використанні і має стійку підтримку браузерми, слід пам'ятати про те, що зображення завжди будуть показані в повний розмір, тобто. великі, з високою роздільною здатністю зображення показуються заповнюючи весь простір, що для невеликих мобільних пристроїв, не завжди в тему, якщо тільки картинка не використовується як фонове зображення.

На цьому, мабуть, і все. Якщо ви хочете, для різних пристроїв, використовувати окремі зображення різного розміру, використовуйте, гірше вже точно не буде. Знаєте інші методи зробити зображення адаптивними, пишіть у коментарях, обов'язково розглянемо, нове воно завжди цікаве.

У цьому посібнику ми в деталях вивчимо технологію створення респонсивного фонового зображення, яке займатиме всю область перегляду в браузері за будь-якої роздільної здатності. І використовувати ми будемо CSS - властивість background-size. Без JavaScript:

Приклади використання адаптивних фонових зображень

На сьогоднішній день дуже популярні сайти, в яких фонове зображення покриває всю область сторінки, що відображається.
Нижче наведено деякі з таких веб-сайтів:

Якщо ви хочете досягти такої «зовнішності» у вашому проекті – ви на правильному шляху.

Основні поняття

Ось план нашої гри.

Використовуємо властивість background-size для покриття всієї області перегляду

CSS-властивість background-size може набувати значення cover . Значення cover наказує браузеру автоматично і пропорційно масштабувати фонове зображення по довжині та ширині таким чином, щоб воно залишалося рівним, або більше, ніж ширина/висота області перегляду.

Використовуємо медіа-запит при отриманні зменшеної версії фонового зображення для мобільних пристроїв

Для зменшення часу завантаження сторінки на маленьких дозволах екрану ми будемо використовувати медіа-запит, щоб отримати зменшену версію картинки. Але це не обов'язково і можна опустити. Ця технологія чудово працює і без цього.

Але все ж таки використовувати зменшені версії фону для мобільних пристроїв ідея непогана, і я поясню чому.
Зображення, яке буде використано у прикладі, має розмір близько 5500 на 3600px.

З цим дозволом ми маємо в плюсі ​​те, що домагаємось покриття всієї області перегляду на більшості широкоформатних моніторів, що випускаються в даний час, але в мінусі маємо розмір зображення. Це близько 1,7 Мб.

Залишати такий обсяг для завантаження одного лише фонового зображення не дуже хороша ідеяу будь-якому випадку, а у випадку з мобільними пристроями це дуже погана ідея. До того ж, подібна роздільна здатність просто зайве на екранах з невеликою роздільною здатністю ( про це я розповім детальніше пізніше).

Отже. Приступимо.

HTML

Нижче показано все, що потрібно з розмітки:

...Вміст вашої сторінки...

Ми призначимо фонове зображення елементу body і таким чином досягнемо повного покриття тлом.

Однак ця техніка спрацює на будь-якому блоковому елементі (такому як div або form). Якщо ширина-висота вашого блочного контейнера рухома, фонове зображення також змінюватиме розмір, щоб зайняти всю область контейнера.

CSS

Ми оголошуємо властивості елемента body наступним чином:

body ( /* Розташування фонової картинки */ background-image: url(images/background-photo.jpg); /* Фонове зображення вирівняне по центру в горизонтальній та вертикальній площинах */ background-position: center center; /* Фон не повторюється */ background-repeat: no-repeat;/* Фон зафіксований в області перегляду і тому не рухається, коли висота контенту перевищує висоту зображення */ background-attachment: fixed; /* Ця властивість змушує фон змінювати масштаб при зміні розмірів контейнера */ background-size: cover; /* Колір фону, який буде відображатися при завантаженні фонової картинки*/ background-color: #464646;

Найважливіша властивість-значення у цьому списку:

background-size: cover;

Варто загострити на ньому увагу. Тут і стається диво. Ця пара значення-властивості і дає вказівку браузеру масштабування фонового зображення в таких пропорціях, що висота-ширина залишатиметься рівною або перевищувати висоту-ширину самого елемента. ( У нашому випадку цей елемент- Body.)

І тут виникає неприємна ситуаціяз парою властивість-значення. У випадку, коли фонове зображення матиме меншу роздільну здатність, ніж розміри елемента body , а статися це може або при відображенні сторінки на екранах високої роздільної здатності, або коли у вас тонни контенту на сторінці, - браузер розтягуватиме зображення.

А як ви знаєте, коли ми розтягуємо зображення понад його справжній розмір — ми втрачаємо якість зображення ( тобто виникає пікселізація):

Не забудьте про це, коли підбиратимете фон. У демо прикладі ми використовуємо фото розміром 5500 на 3600px для великих екранів, і тому в цьому випадку навряд чи станеться щось подібне.

Для того щоб наше тло було вирівняне по центру, ми оголосили таке:

background-position: center center;

Це встановить масштабуючі осі в центр перегляду.

Ми зробимо ось що. Встановимо властивість background-attachment у значення fixed , щоб бути впевненими в тому, що зображення залишиться на своєму місці, навіть якщо ми скролити сторінку вниз:

background-attachment: fixed;

У демо приклад я включив можливість завантажити якийсь контент», щоб простежити поведінку фону під час прокручування сторінки.

Все, що вам залишається зробити - завантажити демо-приклад і трохи поекспериментувати з властивостями позиціонування (background-attachment і background-position) щоб побачити, як вони впливають на поведінку сторінки та фону при прокручуванні.

Наступні значення властивостей говорять самі за себе.

Короткий запис CSS

Вище, наочності, я визначав CSS — властивості у вигляді.

А так виглядає короткий запис:

body (background: url(background-photo.jpg) Центр центр cover no-repeat fixed; )

Все, що вам залишається зробити, це змінити значення URL на шлях до вашої картинки.

Опціонально: медіа-запит на отримання зменшеної версії фонової картинки

Для екранів з меншою роздільною здатністю нам знадобиться Photoshop для пропорційного зменшення роздільної здатності картинки до 768 на 505px. Також я пропустив її через Smush.it, щоб зменшити розмір файлу. Це дозволило зменшити розмір із 1741 до 114 кілобайт. Це зменшило обсяг файлу на 93%.

Не зрозумійте мене неправильно, але 114 кілобайт це все одно досить багато для використання у деяких видах веб-дизайну. І ми завантажуватимемо ці 114 кілобайт тільки в разі потреби, тому що, дивлячись на статистику, слід знаходити компроміси між дизайном для настільних та мобільних пристроїв.

А ось і сам медіа-запит:

Ключова частина медіа-запиту міститься у властивості max-width: 767px , яка, у нашому випадку, означає, що якщо область перегляду браузера більша ніж 767px — використовується велике зображення.

Мінус цього способу полягає в тому, що, якщо ви змінюєте розмір вікна браузера, з, припустимо, 1200px до 640px (або навпаки), ви побачите мерехтливий екран, доки менше або більше зображення буде підвантажуватися.

До того ж, через те, що деякі мобільні пристрої можуть працювати в більшій роздільній здатності — наприклад, iPhone 5 з Retina-дисплеєм роздільною здатністю в 1136 на 640px, менше зображення виглядатиме некрасиво.

Висновок

Весь використаний у цьому посібнику код ви можете взяти з GitHub.