Спестяващи време CSS техники за създаване на отзивчиви изображения

Като уеб разработчик има голяма вероятност да сте срещнали двата врага на тази статия: изображения и срокове . Понякога по някакви причини изображенията ви не отговарят на оформлението и не искате да се увивате около това с часове.

Тази ситуация ми се е случвала много пъти и съм се учил от грешките си. Няма повече хаквания с черна магия - ето петте ми любими техники за справяне с преоразмеряването на изображения.

начинът „OMG, НЕОБХОДИМ ТОЗА МОГАЛО“

В петък е 17:00 ч., Трябва да завършите тази страница, но изображенията няма да отговарят на оформлението. Време е да използвате магическия си трик!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Звучи ми познато? Всички сме го правили веднъж, не ви ли се струва да ви изневерявам?

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

Пътят от бъдещето

Ами ако ви кажа, че този вид магия съществува и за елементи? Кажете „здравей“ на свойството на обекта - което между другото работи и за видеоклипове!

.myImg { object-fit: cover; width: 320px; height: 180px; }

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

Добре какъв е капанът?

За съжаление object-fitняма да работи на IE и по-стари версии на Safari, но има polyfill.

Начинът „Netflix“

Може би си мислите „приятен трик, още един начин, който не работи в стари браузъри като IE?“. Не се притеснявайте, този работи навсякъде и ми е любим! Ще трябва да увиете изображението си с относително подплатен родител.

Ще запазим съотношението на изображението с процент върху paddingимота. Вашето изображение ще бъде абсолютно дете в пълен размер.

Кодът изглежда така:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Хей, човече, изглежда сложно."

След като получите концепцията, техниката е проста и широко използвана. Netflix го използва!

Малко демонстрация:

Простият начин

Може би вече знаете това:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

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

Начин на изпълнение (Разширено)

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

Знаете ли, че в съвременните браузъри можете да промените източник на изображение в зависимост от ширината на вашата страница? За това srcsetе създадено!

Можете да ги комбинирате с HTML 5 таг, който изящно се разгражда с .

Да обобщим

  1. Използвайте, background-image ако изображението ви не е част от съдържанието на страницата.
  2. Използвайте, object-fitако не ви е грижа за IE.
  3. Техниката с подплатени контейнери, използвана от Netflix, работи навсякъде.
  4. В повечето случаи просто добавете height: auto;вашия CSS.
  5. Ако се нуждаете от бързо време за зареждане, използвайте srcsetза зареждане на по-малки изображения на мобилно устройство.