Контролирайте пропорциите на изображението с CSS3

  • Необходими знания: Междинен HTML и CSS
  • Изисква: Текстов редактор, Opera 11 + / WebKit всяка вечер / други поддържащи браузъри
  • Време на проекта: По-бързо, отколкото си мислите
  • Файл за поддръжка

Тази статия се появи за първи път в брой 214 на списание .net.

Контролиране на пропорциите на заменените елементи, като или , може да е болка. Например може да искате всички изображения да заемат едно и също място на страница, но да не се изкривяват и да губят пропорциите си, когато някой използва файл с изображение, който не е с правилния размер.



Лекото преоразмеряване и пощенски кутии на изображението, за да се запази пропорцията, е много по-елегантно решение от смачкването и разтягането на изображение, за да се побере. Или може да искате да отидете по обратния път и да принудите елементи с букви, като HTML5 s, за да отговарят на определена ширина и височина. Може би искате всички видеоклипове да бъдат с определено съотношение и искате решение, при което тези с различни пропорции автоматично да се показват правилно?



Този проблем е още по-неудобен, когато работите със система за управление на съдържанието, в която множество автори на съдържание качват видеоклипове и изображения, особено ако са крайни потребители, а не служители. Ще ви е необходима система, която обработва мултимедия, така че да се показва последователно, но този вид неща са доста трудни, изисквайки JavaScript за достъп и манипулиране на размерите в движение, много CSS трикове или много трудоемка предварителна обработка с език от страна на сървъра като PHP.

CSS3 предлага лесен отговор, който в момента е наблизо. The Стойности на CSS изображение и заменено съдържание Работният проект на модула дефинира свойство, наречено object-fit, което има за цел да реши точно този вид проблеми. И този модул съдържа също свързано свойство, позиция на обекта, което можете да използвате, за да зададете хоризонталната и вертикалната позиция на съдържанието вътре в елемента. Всичко, от което се нуждаете, за да разгледате напълно примерите тук, е поддържащ браузър, като Opera 11 или WebKit всяка вечер. Преди да разгледаме някои примери, нека разгледаме основния синтаксис на новите свойства.



01. Обект-годен

Можете успешно да кандидатствате обект-годен към всеки заменен елемент. (Заменен елемент е всеки, чието съдържание и външен вид се дефинират от външен ресурс като изображение, видео или SVG файл.) Кодът е както следва:

img {
височина: 100px;
ширина: 100px;
обект: съдържа;
}

калъф на macbook pro и капак на клавиатурата

Имайте предвид, че в примерните кодове и примери за тази статия ние задаваме ширината и височината на заменените ни елементи в CSS. Обект-годен също влиза в сила, когато размерите са зададени с помощта на HTML атрибути; това обаче не е толкова добра идея. В браузърите, които не поддържат това свойство на CSS, това би довело до това, че заменените елементи винаги изглеждат смачкани или разтегнати, освен ако разбира се не разполагате с резервно решение, като PHP предварителна обработка на размерите на носителя. Вместо това пропускаме размерите и оставяме браузърите просто да ги показват, използвайки техните вътрешни размери. Подходът, който работи най-добре за вас, ще зависи от вашата конкретна ситуация.



Обект-годен има четири възможни стойности, които са както следва:

  • съдържат : Ако сте задали изрична височина и ширина на заменен елемент, обект: съдържа; ще доведе до преоразмеряване на съдържанието (напр. изображението), така че да бъде изцяло показано със запазено вътрешно съотношение, но все пак ще се побере във размерите, зададени за елемента.

Object-fit: съдържа; прави всички изображения да поддържат пропорции и да се вписват в една и съща област. Той е експериментален, но със сигурност скоро ще дойде в браузър близо до вас

Object-fit: съдържа; прави всички изображения да поддържат пропорции и да се вписват в една и съща област. Той е експериментален, но със сигурност скоро ще дойде в браузър близо до вас
  • запълване : Тази настройка кара съдържанието на елемента да се разширява, за да запълни изцяло зададените за него размери, дори ако това нарушава вътрешното му съотношение.
  • Покрийте : Използването на тази настройка запазва вътрешното съотношение на страницата на съдържанието на елемента, но променя ширината и височината, така че съдържанието напълно да покрива елемента. По-малката от ширината и височината е направена така, че да пасва точно на елемента, а по-голямото измерение прелива елемента.
  • нито един: Когато използвате стойността нито един , съдържанието напълно игнорира всякаква височина или тегло, зададени за елемента, и просто използва вътрешните размери на заменения елемент. Въпреки че стойността нито един е в оригиналната спецификация и се поддържа в Opera, след което е премахната при по-късна ревизия на спецификацията. Може обаче да се върне в бъдеща итерация. ЗАБЕЛЕЖКА: За да видите по-ясно как тези стойности влияят на съотношението на изображението, моля, обърнете се към object-fit-diagram.png във файловете с уроци

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

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

02. Обект-позиция

Обект-позиция работи по абсолютно същия начин като фон-позиция прави за фонови изображения и може да приема същите стойности (пиксели, ems, проценти, ключови думи и т.н.). Той определя позицията на съдържанието на заменен елемент в областта на този елемент. Например:

img {
височина: 100px;
ширина: 100px;
обект: съдържа;
позиция на обекта: топ 75%;
}

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

03. Съотношение на запазване

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

Поставянето на букви в образа означава, че те се възпроизвеждат с оригиналното съотношение на страните, което кара обектите да изглеждат отново истинските си „аз“

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

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

С този проблем можете да се справите наистина лесно обект-годен :

сензорен монитор за mac mini -

img {
ширина: 150px;
височина: 150px;
...
обект: съдържа;
}

В моя пример , всички миниатюри са настроени да бъдат с еднаква ширина и височина, но подходящ за обект: съдържа; принуждава всички изображения да се поберат в една и съща област и да поддържа съотношение на страните. Още по-добро решение, в зависимост от вашето приложение, може да бъде поддържането на съотношението на страните, но променете размера и изрязването на изображението, така че да обгръща напълно елемент.

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

img {
...
обект: корица;
преливане: скрито;
}

В такъв случай, обект: корица; кара изображенията да увеличават размера, за да обгърнат напълно елементи и преливане: скрито; след това отрязва областта на изображението, която се разлива извън тези елементи (вижте object-fit-cover-images.html в примерните файлове).

Тук изображенията са направени така, че да обхващат елемента с приспособяване на обект: корица; и подрязани по размер, използвайки преливане: скрито;

04. Замяна на съотношението на видеото

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

Подходящ за обект: запълване; ни позволява да направим това с един замах. За да илюстрираме въпроса, нашата обект: попълване; видео пример (вж object-fit-fill-video.html в примерите за кода) използва няколко елементи, както следва:



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

По подразбиране видеоклипът, вграден в страница, винаги ще поддържа вътрешно съотношение на страните, като при необходимост се превръща в кутия с букви

По подразбиране видеоклипът, вграден в страница, винаги ще поддържа вътрешно съотношение на страните, като при необходимост се превръща в кутия с букви

The element винаги ще се опитва да поддържа вътрешното съотношение на страницата на изходния файл.

За да поправим това, принудихме всички видеоклипове да отговарят на ширината и височината на елементи чрез прилагане обект: попълване; :

.object-fit {
...
обект: попълване;
}

Това прави всички видеоклипове да се показват в едно и също съотношение.

Подходящ за обект: запълване; отменя поведението по подразбиране, като кара видеоклиповете да поемат зададената ширина и височина на техните елементи

Подходящ за обект: запълване; отменя поведението по подразбиране, като кара видеоклиповете да поемат зададената ширина и височина на техните елементи

05. Преходни ефекти

Комбиниране обект-годен и обект-позиция с CSS преходи може да доведе до някои доста интересни ефекти за галерии с изображения или видео:

Аз

Превърнах галерията с изображения в елегантен интерфейс с раздели, използвайки малко: целеви трикове

Аз

Използвал съм и комбинация от преходи, подходящи за обект: няма; и преливане: скрито; за хладен разширяващ ефект

В този пример (вж object-fit-none-transitions.html , във файловете с уроци), взех галерията с изображения, която видяхме в първия пример, и:

  • Отървах се от центрираното позициониране на примера и сменихме позицията на изображенията и надписите, за да дадем на изображението повече пространство за разширяване.
  • Абсолютно позиционирани всички различни съдържащи изображения и техните надписи, така че всички да се появяват на едно и също място и ги скрива по подразбиране с помощта непрозрачност: 0; .
  • Добавен е набор от навигационни връзки в горната част на примера, за да се придвижвате между различните набори от изображения / надписи и е използван :цел псевдо-клас плюс преходи, за да ги накарате гладко да се появяват и изчезват, когато връзките се циклират (да, това е начин да се създаде индекс с раздели, без да се използва JavaScript).
  • Добавено табиндекс и клавиши за достъп за да направите връзките и изображенията достъпни само с клавиатура.
  • Най-важното за целите на тази статия, разменени обект: съдържа; CSS за следното:

img {
ширина: 150px;
височина: 150px;
...
обект: няма;
преливане: скрито;
позиция на обекта: 25% 50%;
преход: 1s всички;
...
}
img: hover, img: focus {
...
височина: 400px;
ширина: 400px;
}

Когато премествате различните миниатюри, ще забележите, че изображенията не са свити, за да се поберат в елемента.

Вместо това се показва само малка част от изображението и елементът расте, за да разкрие по-голяма част от изображението. Какво дава?

Чрез настройка обект: няма; на елементи, казвам на съдържанието им да игнорира напълно зададената по-рано ширина и височина и да се разлее от страните на елементите.

Тъй като вътрешният размер на файловете с изображения е много по-голям от размерите, посочени за елементи, които съм използвал преливане: скрито; да изрежете всичко, което се разлее.

След това се използва преход за плавно увеличаване на размера на елемент, когато е задържан / фокусиран, което разкрива по-голяма част от изображението.

Хари Потър и портретът на това, което изглеждаше като купчина пепел

И това не е всичко. Използвал съм и позиция на обекта: 25% 50%; свойство да премества позицията на изображението върху елемент вдясно малко, което създава приятен ефект, разкриващ съдържанието.

06. Обобщение

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

Мениджър за взаимоотношения с разработчици за Opera, Крис играе и с хеви метъл рок богове Завоевание на стомана .

Хареса ли ви това? Прочетете тези!