IE6'da bir (CSS) boyutu kullanarak görüntüyü ölçeklendirirken en boy oranı nasıl korunur?

Question 1

İşte sorun. Bir resmim var:

<img alt="alttext" src="filename.jpg"/>

Yükseklik veya genişliğin belirtilmediğine dikkat edin.

Bazı sayfalarda sadece bir küçük resim göstermek istiyorum. HTML'yi değiştiremiyorum, bu yüzden aşağıdaki CSS'yi kullanıyorum:

.blog_list div.postbody img { width:75px; }

Bu (çoğu tarayıcıda) tümü korunmuş en boy oranlarına sahip tek tip genişlikte küçük resimlerden oluşan bir sayfa oluşturur.

IE6'da, görüntü yalnızca CSS'de belirtilen boyutta ölçeklenir. 'Doğal' yüksekliği korur.

Sorunu açıklayan bir çift sayfa örneği:

Tüm öneriler için minnettar olurum, ancak şunu belirtmek isterim (seçilen platformun sınırlamaları nedeniyle) html'yi değiştirmeyi içermeyen bir şey arıyorum. CSS de javascript'e tercih edilebilir.

DÜZENLEME: Görüntülerin farklı boyutlarda ve en boy oranlarında olduğunu belirtmelidir.

Question 2

Adam Luter bana bunun fikrini verdi, ama aslında çok basit olduğu ortaya çıktı:

img {
  width:  75px;
  height: auto;
}

IE6 şimdi görüntüyü iyi ölçeklendiriyor ve bu, diğer tüm tarayıcıların varsayılan olarak kullandığı şey gibi görünüyor.

Yine de her iki yanıt için teşekkürler!

Question 3

İşe yaradığına sevindim, bu yüzden diğer tarayıcıları taklit etmesi için IE6'da açıkça 'otomatik' ayarını yapmanız gerekti!

Aslında yakın zamanda görüntüleri ölçeklendirmek için yine arka planlar için tasarlanmış başka bir teknik buldum. Bu tekniğin bazı ilginç özellikleri vardır:

Görüntü en boy oranı korunur
Görüntünün orijinal boyutu korunur (yani asla küçülmez, sadece büyüyemez)

Biçimlendirme, bir sarmalayıcı öğesine dayanır:

<div id="wrap"><img src="test.png" /></div>

Yukarıdaki işaretleme göz önüne alındığında şu kuralları kullanırsınız:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Daha sonra sarmalayıcının boyutunu kontrol ederseniz, yukarıda listelediğim ilginç ölçek efektlerini elde edersiniz.

Açıkça belirtmek gerekirse, aşağıdaki temel durumu göz önünde bulundurun: 100x100 boyutunda bir kap ve 10x10 boyutunda bir görüntü. Sonuç, 100x100 boyutunda ölçeklenmiş bir görüntüdür.

Kapsayıcı 20x100 olarak yeniden boyutlandırılan temel durumdan başlayarak, görüntü 100x100 olarak yeniden boyutlandırılır.
Temel durumdan başlayarak, görüntü 10x20 olarak değiştirilir, görüntü 100x200 olarak yeniden boyutlandırılır.

Yani, başka bir deyişle, görüntü her zaman en az kap kadar büyüktür, ancak en boy oranını korumak için bunun ötesine ölçeklenecektir .

Bu muhtemelen siteniz için yararlı değildir ve IE6'da çalışmaz. Ama, ise görünümünüzü liman veya konteyner için ölçekli bir arka plan elde etmek yararlıdır.

Question 4

Bu sorunu çözecek bir CSS hack'i düşünebilirim.

CSS dosyanıza aşağıdaki satırı ekleyebilirsiniz:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }

Yukarıdaki kod yalnızca IE6 tarafından görülecektir. En boy oranı mükemmel olmayacak, ancak biraz normal görünmesini sağlayabilirsiniz. Gerçekten mükemmel hale getirmek istiyorsanız, orijinal resim genişliğini okuyacak bir javascript yazmanız ve bir yükseklik belirtmek için oranı buna göre ayarlamanız gerekir.

Question 5

CSS'de açık ölçekleme yapmanın tek yolu, burada bulunanlar gibi hileler kullanmaktır .

Yalnızca IE6, filtreleri de kullanabilirsiniz ( PNGFix'e bakın ). Ancak bunları sayfaya otomatik olarak uygulamak için javascript gerekir, ancak bu javascript CSS dosyasına gömülebilir.

Javascript'e ihtiyaç duyacaksanız, içerik yüklendikten sonra resmi inceleyerek javascript'in eksik yükseklik değerini doldurmasını isteyebilirsiniz. (Üzgünüm bu teknik için bir referansım yok).

Son olarak, bu sabun kutusu için beni affedin, bu konuda IE6 desteğinden kaçınmak isteyebilirsiniz. Kuralınızdan _width: autosonra ekleyebilirsiniz width: 75px, böylece IE6 en azından resmi yanlış boyutta olsa bile makul şekilde işler.

Son çözümü öneriyorum çünkü IE6 yolda:% 20 ve ayda neredeyse yüzde bir düşüyor . Ayrıca, sitenizin eğlence amaçlı ve Birleşik Krallık'ta olduğunu da not ediyorum. Bunların her ikisi de demografinin IE6'dan uzaklaşmasına yardımcı oluyor: IE6 kullanımı hafta sonları yaklaşık% 40 düşüyor (alıntı yok) ve Birleşik Krallık'ta çok daha düşük bir IE6 demografisi var (yine alıntı yok, üzgünüm).

İyi şanslar!