Регулиране на размера на изображението, за разделителната способност на екрана
Всички места на оформлението на оформлението на страницата може да бъде разделена на три основни групи: фиксира неподвижно (Твърдо фиксиран). адаптивна каучук (Адаптивна течност) и разгъващи еластични (Разширяващите еластични) оформления.
В тази тема, помислете за възможностите за регулиране на елементите на дизайна капачки - а именно, изображения, оформления обекти по каучука.
Това се прави обикновено в три основни начина:
* Налагането шапки, които няма фиксирани области на заден план.
* Промяна на изображението, позициониран - по различни начини.
* Промяна на всички видове елементи от динамично добавяне / промяна на стила.
Налагане капачки, без фиксирани области на заден план.
Най-често срещаните и крос-браузър, е вид строителство:
и фон - в средата.
.
За една маса, в този случай, предписан модел, а ширината е процент - обикновено 100%.
Ширината на клетките на таблицата, в която ще бъде поставен графичните елементи, обикновено, предписани в пиксели, но най-малко един от клетките на таблицата трябва да има свободна ширина (авто).
Това означава, че ако две клетки, като в този случай, на предписания фиксирана сума, равна на ширината на изображението на втория сет, за да «автоматичен» - това е, за останалата част от широчината.
Сами снимки могат да вмъкват в определената за тях клетка като картинка (таг
В този случай, на фона на снимката поставена, тъй като лява клетка вече съдържа текстов блок - авторско право, и от дясната страна поема нейното присъствие.
Толкова е просто - разгледаме един пример:
Но не всяка капачка могат да се режат по този начин, и тук започват да имаме някои трудности.
Обмислете варианта за справяне с тях по-нататък.
Промяна на параметрите на изображенията позиционирани
Мащабиране спрямо елемента майка.
В този случай - на масата.
Само искам да отбележа, че в Internet Explorer, малък проблем с промяната на размера на обекта - в този случай - на снимката.
Същността му е, както следва:
Ако си представяте действителната ширина е например 1024, и че е необходимо, когато промените ширината на прозореца на браузъра се изображение се разтяга / стесни пропорционално, а след стесняването на ширината на прозореца на браузъра на изображението в определен момент е "заби" и да не се стесни още повече. В резултат на това той е извън границите на предназначения съдържание.
Искам да кажа, изображението не е стеснен по-малък от действителния им размер.
Управлява този "бъг" е съвсем проста и е само една линия на CSS код - в имот «маса оформление: фиксирана», които да се прилагат към таблицата, която влезе на снимката.
Ето защо, ако си представяте шапки очевидно по-голяма минимална ширина на обекта, трябва да зададете този параметър маса.
Той е разположен чрез стилове (CSS) и има общо два аргумента: «автоматичен» и «фиксирана».
В допълнение:
Ако изображението не е уточнено височина или задайте «автоматичен» - изображението се мащабира пропорционално (запазване на пропорциите).
Ако височината на споменатия специфичен (положително във всички единици). съотношението на страните е нарушен и изображението се мащабира встрани, като същевременно се поддържа предварително определена височина.
? 200 '200px': '' + (this.scrollHeight + 5) + 'пиксела ");">
CSS стилове (изображението се мащабира пропорционално)
.
когато:
document.body.className - комплект таг
window.onresize = setScreenClass; - функцията за повторение при преоразмеряване на прозореца.
.
Пример ☑.
.
Забележка:
Програмният код, който се прилага JavaScrpt. специални символи трябва да бъдат избягали.
Символ се нарича "специален". ако носи допълнително значение.
Защитна - подмяна на текста на специални символи в съответния текст заместване.
Вътре редовете то се осъществява с помощта на "# 92 символи; "- наклонена черта, която разказва преводачът, че следното характер следва да се възприема като нормален характер, а не като оператор / специален знак.
В този случай, символът "# 92; "Мога сам щит, това е, за да изведете на комбинация от наклонена черта" # 92; # 92; ".
Бих искал да се спра на темата все пак, като фоново изображение на страницата, и динамично промените настройките му, в зависимост от разделителната способност на екрана на потребителя.
А именно:
* Изображението трябва да напълни изцяло на фона на страницата, независимо от разделителната способност на екрана;
* Трябва. възможно да се поддържа съотношение (съотношение); (По-късно ще стане ясно, защо е написано "възможно")
* Снимката не трябва да причинява превъртане (ленти за превъртане);
.
Промяна на фона на страницата чрез CSS3 имоти «фон размер»
Както споменах по-горе, с навлизането на CSS3. а именно свойствата на «фон размер». да го направи достатъчно проста.
Позволете ми да ви напомня: имот «фон размер» подкрепена от големите съвременни браузъри - Internet Explorer 9. Firefox 4+. Opera 9.5 +. Safari 5. Chrome 4+. Konqueror 3.5.4 +.
HTML-код:
- Това не е необходимо, тъй като ние работим само с етикет
- ако това - погледнете изходния код.
.
когато:
HTML, тялото - Питам «HTML» и «тяло» фоновия цвят - прозрачен - така грееше на картината.
HTML - Питам фон картина HTML, го оправи в центъра, забраняват се повтаря.
HTML - възлага CSS3 имот фон размер стойност «покритие» - да мащабирате изображението при запазване на пропорциите на максимален размер (ширина или височина - че повече) единица - в този HTML.
Сега тя работи в IE. включително шестата версия.
.
Промяна на фона на страницата, като разположени изображения.
Повече сравнително лесен начин да се оправи и се простират на заден план, в зависимост от големината на монитора е, както следва: - за съдържание е затворено изображението е фиксиран в горния ляв ъгъл, и е определен минималният размер на ширината и височината на 100% - по този начин запази пропорционалността при преоразмеряване.
Също така, тя добавя мин ширина ширина на изображението, така че изображението никога няма да бъде по-малко от действителния им размер.
Така че не е на преден план, самата картина и обвивка блок изместен от Z-ос на фон (Z-индекса: 1).
Също така, използвайте @media екран и (макс ширина: 1024 на). който регулира позицията на изображението, ако прозореца на браузъра е по-малък, отколкото на изображението, като използва комбинация от процента от стойността на лявата позиция и отрицателни лявото поле.
? 200 '200px': '' + (this.scrollHeight + 5) + 'пиксела ");">
- Добавен след съдържанието преди затварянето .
Пример ☑.
.
☑ И още един пример за крос-браузър (плъзнете от горния ляв ъгъл, леко отместване).
.
Забележка.
Трябва да се разбере. че големият мащабиране на изображението, толкова по-фиксирана неподвижно заден план, намалена производителност на браузъра.
В допълнение. така че да не губят качество за големи резолюции на екрана, картината е по-добре да се използва с максимални размери, както и тези изображения може да тежи много.
Исках да знам дали е възможно да се направи оптимизация на сайт фон на различни монитори, които ще, например, ако фоновото изображение на 1600 от 1200 пиксела, не изглеждат занемарено 1024 до 768 се дължи на факта, че има, а другата половина не се вписва, както и да се приспособи към желания размер на екрана, като например се случва на нашите настолни компютри, когато решите oboinu, тя регулира до желания размер на екрана, но не подстригва, с което се отхвърля всичко, което не е включена. Ще Ви бъда благодарен за вашата помощ, ако някой знае.
Как да го направя? Ние прочетете тук (пример за това как тя работи)