Rasm hajmi HTML formatida bo'lishi kerakmi?

Men esga tushundimki, har qanday tasvir uchun qattiq kodli kenglik va balandlik uchun (odatda o'rnatish vaqtida tegishli bo'shliqni ajratish) eng yaxshi amaliyot bo'lganini eslayman, lekin hozir ko'pchilik odamlar bilan yuqori tezlikda va odatda ko'proq dinamik narsalar bilan bu nimani anglatadi? ? Hali ham tarkibdagi tasvirning html formatida inline o'lchamiga ega ekanligi afzalmi?

1

8 javoblar

HTML xususiyatlaridan yoki uslublar jadvalidan foydalangan holda o'lchamingizni belgilashingiz muhim emas, ammo siz hali ham tasvirlar uchun o'lchamni ko'rsatishingiz kerak.

Ko'rinib turibdiki, bugungi kunda juda tez suratlar yuklangan, sahifaning ko'rsatilishi va tasvirlar paydo bo'lishi o'rtasida hali ham sezilarli kechikish mavjud. Rasmlarni yuklash vaqtida sahifaning tartibi o'zgarganda, bezovta qilmoqda.

2
qo'shib qo'ydi

Wordpress Stack Exchange-da va shuningdek, Webmaster Stack-da o'xshash savolga javob berdim. Men bu erda uni aniqlab berishga va ko'proq odamlarga yordam berishga tayyorman. (administratorlar/moderatorlar: agar bu ruxsat etilmagan bo'lsa, menga yordam berishning to'g'ri yo'lini bilib qo'ying).

html tilidagi kenglik va balandlikni belgilashingiz kerak degani emas. Buning ma'nosi shundaki, siz bo'sh joyni zaxiralashingiz va tasvirni yuklaganingizda, brauzer sahifani qayta tiklashi va qayta bo'yashiga to'g'ri keladi.

     

Bundan tashqari, siz o'lchamlarni qattiq kodlasangiz, u mag'lubiyatga uchraydi. Agar tartibingiz sezgir bo'lmasa, u yaxshi, ammo ba'zi javoblarni saqlashni istasangiz, natijalarga erishish uchun faqat CSS-dan foydalanishingiz mumkin.

     

Ko'pincha, har ikkala kenglik va max-width: 100 dan foydalangan holda ishni bajaradi, lekin

bu post ning qiziqarli uslubi bor: maksimal kenglikni ishlatish o'rniga: 100%, The Padding -Bottom Hack :

     

"Usul bilan biz balandlikni kenglikka nisbatan o'lchov sifatida belgilab olamiz, masalan, to'lg'azish va marjaning bunday ichki xususiyatlari bor va ularni tarkibida bo'lmagan elementlar uchun aspektlar nisbatini yaratish uchun foydalanishimiz mumkin.   To'ldirilishi bu qobiliyatga ega bo'lgani sababli, to'ldiruvchi taglik elementning kengligi bilan bog'liq bo'lishi mumkin. Agar biz ham balandlikni 0 ga aylantirsak, biz xohlagan narsani olamiz. [...]

     

Keyingi qadam konteyner ichida tasvirni joylashtirish va konteynerni to'ldirishi kerak. Buni amalga oshirish uchun rasmni konteyner ichida to'liq joylashtirishimiz kerak: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
2
qo'shib qo'ydi

Ha, hali ham afzal.

Ko'pgina odamlar yuqori tezlikdagi ulanishga ega emaslar, va mobil aloqa yanada keng tarqalgan.

1
qo'shib qo'ydi

CSS-dan foydalanish uchun har doim yaxshi

Rasm balandligi va kengligi bu kabi kodni tuzatishi mumkin

.myimg img {
width: 10px;
height: 10px;
}
0
qo'shib qo'ydi
ko'pchilik CSS-dan foydalanishni aytmoqda. Tasvirlar tarkibi va o'zgaruvchan miqdori bo'lgan hollarda nima bo'ladi? Men turli xil tasvirlar uchun maxsus sinf yaratadimi? Rasm hajmi kattalaridan barqaror turing (vertikal/gorizontal, turli aspektlar, kichik/o'rta/kattalik) yoki html-da bo'lganlarni o'lchamisiz?
qo'shib qo'ydi muallif Damon, manba

sizning rasmingizning o'zi sizning xohishingiz o'lchamida bo'lishi kerak, aksariyat hollarda, ayniqsa, sekin yuklanish haqida xavotirlangan bo'lsangiz! agar sizda 500X800 pikselli rasm bo'lsa, faqat 100X200 sifatida ko'rsatishni xohlasangiz, uni kattalashtiring! fayl hajmi juda kichik bo'ladi, shuning uchun u tezroq yuklanadi :)

0
qo'shib qo'ydi
Umuman olganda, ha, ko'p yangi sezgir texnika bularni talab qilmasa ham (garchi siz buni istisno qiladigan darajada katta bo'lmasa ham)
qo'shib qo'ydi muallif Damon, manba

Inline bo'lish shart emas - tashqi CSS-da buni amalga oshirishingiz mumkin. Agar ba'zi kattaroq brauzerlar sizning hajmini ko'rsatmasa, uni faqat 0px deb hisoblashadi;

0
qo'shib qo'ydi

Rasmning yuki yoki hujjat yuklanishi paytida bo'sh joy mavjudligiga ishonch hosil qilishni istasangiz, ha deb ayta olaman. Biroq tasvirni bu xususiyatlar bilan o'lchamoq/qayta o'lchamoqchi bo'lsangiz, brauzerda keraksiz yuk bo'lishi va rasm buzilishiga olib kelishi mumkin.

0
qo'shib qo'ydi

Agar siz o'zaro faoliyat brauzerni moslashuvchanligi uchun loyihalashtirmoqchi bo'lsangiz, unda hech bo'lmaganda rasmning o'zi uchun CSS-dagi balandlik va kenglikni belgilang. Firefox, IE, Opera va boshqalar bilan mos kelmasa, o'lchamlari tasvir uchun aniq ko'rsatilmagan bo'lsa. Har bir brauzerning turli versiyalar haqida gapirmasliklari uchun HTML standartlariga qat'iy rioya qilish kerak. Ba'zi brauzerlar HTML-dizaynerlar niyatini ekstrapolyatsiya qilish uchun qo'lidan kelganicha harakat qiladilar, boshqalar esa birinchi xatoga yo'l qo'yishadi. Agar veb-saytni planshet kabi mobil qurilmada ko'rishni niyat qilsangiz, shuningdek, piksel yoki% dan emas, balki em o'lchamlarini tavsiya qilaman. Men faqatgina HTML5 bilan o'ynashni boshladim, shuning uchun HTML5-da tasvirlarga nisbatan farqim yo'q.

0
qo'shib qo'ydi