Nasıl dinamik olarak tarayıcı/yükseklik değişiklikleri genişlik olarak CSS ile bir resmi yeniden boyutlandırmak olabilir miyim? | Netgez.com
SORU
13 Ocak 2011, PERÅžEMBE

Nasıl dinamik olarak tarayıcı/yükseklik değişiklikleri genişlik olarak CSS ile bir resmi yeniden boyutlandırmak olabilir miyim?

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.)

CEVAP
25 ÅžUBAT 2012, CUMARTESÄ°

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).

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
CssResimImageTarayıcıBrowserYeniden BoyutlandırmaResizePencereWindow

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Blendtec

    Blendtec

    30 EKÄ°M 2006
  • chickenby

    chickenby

    2 HAZÄ°RAN 2008
  • Electro Posé

    Electro PosÃ

    21 ÅžUBAT 2013

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR