Görüntü boyutunu iletme, en iyi uygulama

12

Biçimlendirmeyi biçimlendirmenin dışında tutmak için geçerli en iyi uygulamayı kullanan bir html belgesi geliştiriyorsanız, görüntü boyutlandırmayı en iyi nasıl iletirsiniz?

Geçmişteki en iyi uygulama, görüntünün boyutlarını almasını bekleyen tarayıcıdan daha hızlı görüntüleneceği için görüntü yüksekliği ve genişliğini ister. Ancak bunu yapmak, yalıtım tarzını belgeden çıkarıyor gibi görünüyor.

Her görüntüye bir id niteliği ekleyin ve yükseklik / genişliği css? Bu, satır içi görüntü yüksekliği ve genişliğinin oluşturma bonusunu olumsuz etkiliyor mu?

css html images

— Thomas
kaynak

12

IMG öğesinde genişlik ve yüksekliğe sahip olmak onaylanmamıştır ve tarayıcıya bir görüntünün genişliğini ve yüksekliğini söylemenin kesinlikle en iyi yoludur. Başka bir yoldan yapmak için yolunuzdan çıkmak gereksiz ve gereksizdir (ve muhtemelen aptalca). Kendiniz veya tarayıcı için gereksiz işler yapmayın. Çalışan temel özelliklere sadık kalın.

— John Conde
kaynak

1

... ve ALTboş veya uyumluluk denetleyicileri şikayet edecek olsa bile bir etiketi de unutmayın .

— Talvi Watia

@Tchalvak Üzgünüm ama yanılıyorsun. Genişlik ve yüksekliği sunucu tarafı programlama ve / veya JavaScript ile dinamik olarak geçersiz kılabilirsiniz. Ve mantığınızla satır içi stilleri de geçersiz kılamazsınız.

— John Conde

Hatalar, zaten bir css üzerine yazma eksikliği hakkında yanlış gibi görünüyor !important, css içinde width & height niteliklerini geçersiz kılmanıza izin verir, bu nedenle başlangıçta width / height kullanmak iyi çalışır. Şimdi oylama pozisyonunda kaldım. Cevabı düzenlemek isterseniz, bunu değiştirirdim. omuz silkiyor Çok önemli değil.

— Kzqai

8

John Conde'un cevabı yerinde. Görüntülerin genişliği ve yüksekliği vardır - stilinin değil, içeriğinin bir parçasıdır . Yani burada "ayrılık" yapmaya gerek yok.

Ancak bir istisna: resim boyutları için CSS olan birçok resim varsa kullanışlı hepsi aynı boyutta (örneğin küçük resimler). Burada HTML'yi kesmek ve gelişimi hızlandırmak için bir CSS sınıfı kullanmak çok daha iyi.

Bir web sitesinin düğmeler ve simgeler içeren tasarımı için en iyi çözümünüz CSS sprite'larıdır.

— DisgruntledGoat
kaynak

+1, css sprite'lar bir sitenin hızında gülünç bir fark yaratır.

— Kzqai