Javob beradigan rasmlarni yaratish uchun vaqtni tejaydigan CSS usullari

Kevin Ku surati Unsplashda

Veb-ishlab chiqaruvchi sifatida ushbu maqolaning ikkita dushmaniga duch kelganligingiz juda katta: rasmlar va muddatlar. Ba'zan, ba'zi sabablarga ko'ra, rasmlaringiz maketga to'g'ri kelmaydi va siz soatlab boshingizni o'rashni xohlamaysiz.

Bu holat men bilan ko'p marta sodir bo'lgan va men xatolarimdan saboq oldim. Boshqa hech qanday qora sehrli xakerlar yo'q - bu erda men tasvirning o'lchamini o'zgartirish uchun beshta sevimli usulim.

"OMG, Men BU ASAPNI KO'RMAYMAN"

Juma kuni soat 17.00 da siz ushbu sahifani tugatishingiz kerak, lekin rasmlar maketga mos kelmaydi. Sehrli hiyla-nayrangdan foydalanish vaqti keldi!

.myImg {
  background-image: url ("mening-image.png");
  background-size: qopqoq;
}

Tanish ovozlarmi? Biz barchasini bir marta qildik, sizni aldash kabi emasmi?

Fon xususiyatlaridan foydalanish juda foydali, ular shunchaki ishlaydi. Shunga qaramay, siz ulardan faqat tarkibiy bo'lmagan rasmlar uchun yoki matnni almashtirish uchun va ba'zi bir holatlarda foydalanishingiz kerakligini unutmang.

Kelajakdan yo'l

Agar men sizga aytdimki, bunday sehr elementlari uchun ham mavjud? Ob'ektga mos keladigan mulkka "salom" deb ayting - u ham videolar uchun ishlaydi!

.myImg {
  ob'ektga moslash: qopqoq;
  kengligi: 320px;
  balandligi: 180px;
}

Bu hamma millat! Biz do'stona qiymat qopqog'ini olganimizda, tarkibdan qanday foydalanishimiz mumkinligini ko'rib chiqing.

Xo'sh, tuzoq nima?

Afsuski, object-fit IE va Safari-ning eski versiyalarida ishlamaydi, lekin polifil mavjud.

manba: https://css-tricks.com/almanac/properties/o/object-fit/#article-header-id-4

"Netflix" usuli

Siz "yoqimli hiyla-nayrang, yana IE like kabi eski brauzerlarda ishlamaydi" deb o'ylashingiz mumkin. Xavotir olmang, bu hamma joyda ishlaydi va bu mening eng sevimli! Rasmingizni nisbiy yostiqli ota-onangiz bilan bog'lashingiz kerak bo'ladi.

Tasvirning nisbatlarini to'ldirish xususiyatida foiz bilan saqlaymiz. Sizning rasmingiz to'liq hajmdagi mutlaq bola bo'ladi.

Kod quyidagicha ko'rinadi:

.
  lavozim: nisbiy;
  padding-top: 56.25%; / * 16: 9 tomonlar nisbati * /
}
img {
  lavozim: mutlaq;
  chap: 0;
  yuqori: 0;
  kengligi: 100%;
  balandligi: avtoulov;
}

"Hey odam, bu murakkab ko'rinadi."

Kontseptsiyani olganingizdan so'ng, texnik oddiy va keng qo'llaniladi. Netflix undan foydalanadi!

Sinf nomlarini ko'rib chiqing!

Bir oz namoyish:

Oddiy usul

Siz buni allaqachon bilishingiz mumkin:

img {
  balandligi: avtoulov;
  kengligi: 100%;
/ * yanada kengroq boshqarish bilan * /
  maksimal kengligi: 720px;
}

Agar sizning maketingiz juda murakkab bo'lmasa, aksariyat hollarda u ishlaydi.

Ishlash usuli (Kengaytirilgan)

Ishlash bo'yicha, men yuk vaqtlarini nazarda tutaman. Katta qahramon tasviri uni buzishi va sahifangizni sekinlashtirishi mumkin, ayniqsa mobil qurilmada.

Zamonaviy brauzerlarda sahifangizning kengligiga qarab rasm manbaini o'zgartirishingiz mumkinligini bilarmidingiz? Bu srcset uchun yaratilgan!

Siz ularni HTML 5 > teg bilan birlashtirishingiz mumkin, bu esa ularni bilan yaxshilaydi.


  
  
  

Qayta solish uchun

  1. Agar sizning rasmingiz sahifa tarkibiga kirmasa, orqa fon rasmidan foydalaning.
  2. Agar siz IE haqida qayg'urmasangiz, ob'ektga moslashtiring.
  3. Netflix tomonidan ishlatiladigan to'ldirilgan idishlar texnikasi hamma joyda ishlaydi.
  4. Ko'pgina hollarda, faqat balandlikni qo'shing: avtomatik; CSS-da.
  5. Agar sizga tez yuklanish vaqtlari kerak bo'lsa, srcset-dan mobil rasmlarga kichikroq rasmlarni yuklash uchun foydalaning.