Контролиране на пропорциите на изображенията
При последния проект с който се занимавах се наложи да въведа на няколко места боксове за снимки в които бе нужно да се контролират пропорциите на снимките. Както повечето дизайнери знаят, консистентното представяне на медийни елементи на сайта може да се окаже проблем, когато има множество автори на съдържание.
Управляването на пропорциите за подлежащи на замяна елементи като снимки и видео може да бъде кошмарно в сайтове с CMS системи и наличие на повече от един автор публикуващ съдържание в тях. Това може елегантно да се реши с новото свойство в CSS3 – Оbject-fit.
Оbject-fit
Може успешно да прилагате Оbject-fit към всеки подлежащ на замяна елемент, чието съдържание и външен вид се определя от външен ресурс, като например изображение или видео. Кодът е следният:
img {
height: 100px;
width: 100px;
object-fit: contain;
}
Обърнете внимание, че в примерния код задаваме широчината и височината на подлежащите на замяна елементи в CSS. Object-fit действа също така и когато размерите са зададени чрез HTML атрибути, това обаче не е много добра идея. В браузърите, неподдържащи това CSS свойство, това ще накара тези подлежащи на замяна елементи винаги да изглеждат смачкани или разтеглени, освен ако, разбира се, не разполагате с резервно решение, като например предварителна обработка на размерите на медийните файлове с PHP. Затова пропускаме дефинирането на размери и оставяме браузърите да ги покажат със стандартните им размери. Най-подходящият подход във вашия случай ще зависи от конкретната ситуация.
Object-fit има четири възможни стойности:
- contain: Ако сте задали изрично височина и широчина за заменения елемент, object-fit:contain ще накара съдържанието (изображението) да се преоразмери така, че да се показва изцяло при запазени първоначални пропорции, но все пак да се побира в размерите, определени за този елемент.
- fill: Тази стойност кара съдържанието на елемента да се разшири така, че да изпълва изцяло определените му размери, дори и ако това нарушава първоначалните му пропорции.
- cover: Тази стойност запазва първоначалните пропорции на съдържанието на елемента, но променя широчината и височината му така, че съдържанието напълно да покрие елемента. По-малката от стойностите за широчина и височина се използва, за да пасне в елемента точно, а по-голямата страна прелива извън елемента.
- none: При тази стойност съдържанието напълно игнорира стойността за ширина weight за елемента и просто използва първоначалните размери на заменения елемент. (За момента тази стойност е премахната от спецификацията и се поддържа само от Opera, но в бъдеще може отново да се върне и да бъде използвана).
Object-position
Object-position прави точно каквото прави и background-position за фоновите изображения и може да приема съшите стойности (пиксели, еm, проценти, ключови думи и т.н.). Това свойство определя позицията на съдържанието на заменения елемент в областта му. Например:
img {
height: 100px;
width: 100px;
object-fit: contain;
object-position: top 75%;
}
В Opera object-fit може да приема и стойност auto, която е подразбираща се, ако няма зададена стойност. Тя всъщност съществува единствено с цел обратна съвместимост и за да позволи да се предефинират предишни настройки.
Запазване на пропорцията
Има случаи, в които искате да запазите пропорциите на изображенията в страницата и да ги поберете в същата област – понякога се нарича letterboxing. Например може да разполагате със система за управление на съдържанието, която позволява да се качват продукти в сайт за електронна търговия или снимки в галерия, с много различни автори на съдържание.
Те могат да качват снимки с приблизително правилна големина, но размерите им невинаги ще бъдат точни, независимо от всички препоръки, които публикувате! В такъв случай можете да промените съотношението на страните, за да накарате снимките да паснат точно в същата област, но това вероятно ще изглежда ужасно.
Друг вариант е да добавите празни ленти под и над изображенията (letterbox). Това изглежда много по-добре, но е доста сложно за постигане при сегашната поддръжка в браузърите. Може разбира се да ползвате и някакво сървърно решение за предварителна обработка, но и това е доста сложно и натоварващо.
Най лесното решение на този проблем е разбира се с object-fit.
img {
height: 150px;
width: 150px;
…
object-fit: contain;
}
В този пример на снимките са настроени да са с еднакви височина и ширина, но object-fit: contain ги кара да се поберат в една и съща област и да запазят пропорциите си. А още по-добро решение е да запазите пропорциите, но да промените размера и да изрежете изображението, така че то напълно да заема елемента <img>.
Това става лесно чрез заменянето на object-fit: contain с object-fit: cover и добавянето на overflow:hidden.
img {
…
object-fit: cover;
overflow:hidden;
}
Тук object-fit: cover кара изображенията да увеличат размера си, докато напълно заемат елементите <img>, а след това overflow:hidden изрязва областта от изображението, която се подава извън тези елементи.
Поддръжка при различните браузъри
Поддръжката за object-fit и object-position започва от Opera 11. Може да се използват за следните подлежащи на замяна елементи: <video>, <object>, <img>, <input type=image>, <svg>, <svg:image> и <svg:video>.
Ето и пълната гама от префикси на производители, гарантиращи, че те ще работят в отделните браузери:
-moz-object-fit: contain;
-ms-object-fit: contain;
-o-object-fit: contain;
-webkit-object-fit: contain;
object-fit: contain;
Източник: .net
Please login to comment