Bir resim ile birlikte bir tarayıcı penceresi, here şimdiye kadar (veya download the whole site in a ZIP) yaptım nedir resize yapabilirim merak ediyorum.

Görüntü her zaman yeniden değil, bir şekilde sayfa yüklendiğinde pencere boyutuna bağlıdır. bu işleri Firefox tamam, ama Krom sorunları var:

Bu da Safari Tamam çalışır, ama bazen görüntü minimum genişliği/yüksekliği ile yüklenir. Belki bu resim boyutunu neden olur, emin değilim. (Yükler Tamam, hatayı görmek için birkaç kez yenilemeyi deneyin.)

Bu nasıl daha fazla kurşun geçirmez yapabilirim herhangi bir fikir? (JavaScript, gerekli görüldüğü takdirde, bununla da yaşayabilirim, ama CSS tercih edilir.)

Buolabilirsaf CSS ile yapılması ve hatta medya sorguları gerektirmez.

Görüntüler esnek yapmak için, sadece eklemek max-genişlik:100% ve height:auto. Max genişlik:100% görüntü ve yükseklik:7, ama IE8 değil otomatik çalışır (Evet, tuhaf bir IE hata). Bunu düzeltmek için, genişlik eklemeniz gerekir:otomatik IE8\9.

kaynak: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Ve eğer resmin sabit max genişliği uygulamak istiyorsanız, sadece, örneğin: bir kabın içine yerleştirin

<div style="max-width:500px;">
    <img src="..." />
</div>

jsFiddle example here. Hayır javascript gerekli. Chrome, Firefox ve IE en son sürümlerinde çalışıyor test ettim tüm).