Duyarlı retina görüntüsü

Question

Tüm ekranlar için sadece bir görüntü sunmak istiyorum, bu yüzden görüntü genişliğini iki katına çıkaran bir görüntü 2000px genişliğinde oluşturdum ve img etiketindeki genişlik ve yüksekliği satır içi stiliyle 1000 piksel genişliğe ayarlıyorum. 242 piksel yüksek. Aşağıdaki css kodu img etiketine 'img-duyarlı' olarak adlandırılan önyükleme sınıf ekledik:

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Ancak şimdi ekran genişliği görüntü genişliği ölçekler azaltır ancak yükseklik sabittir zaman. Ekran genişliği ile hem genişlik hem de yükseklik ölçeğini nasıl yapabilirim ve yalnızca bir çift genişlikli resim, retina.js kullanmadan setrc kullanmadan ve bir svg dosyası kullanmadan kullanabilir miyim?

Answer 1

Yüksekliğe önemli etiketler eklemeyi deneyin: auto. Bence tarzını etkileyen başka bir css var.

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto !important; 
}