Tarayıcı genişliği / yüksekliği değişirken bir resmi CSS ile dinamik olarak nasıl yeniden boyutlandırabilirim?

Tarayıcı penceresiyle birlikte bir resmi nasıl yeniden boyutlandırabileceğimi merak ediyorum, işte şu ana kadar yaptıklarım (veya tüm siteyi bir ZIP olarak indirdim ).

Bu Firefox'ta sorunsuz çalışıyor, ancak Chrome'da sorunları var: görüntü her zaman yeniden boyutlandırılmıyor, bir şekilde sayfa yüklendiğinde pencerenin boyutuna bağlı.

Bu, Safari'de de sorunsuz çalışır, ancak bazen görüntü minimum genişliği / yüksekliğiyle yüklenir. Belki de bu görüntü boyutundan kaynaklanıyor, emin değilim. (Tamam yüklerse, hatayı görmek için birkaç kez yenilemeyi deneyin.)

Bunu nasıl daha kurşun geçirmez hale getirebilirim? (JavaScript gerekecekse onunla da yaşayabilirim, ancak CSS tercih edilir.)

Bu , saf CSS ile yapılabilir ve medya sorguları bile gerektirmez.

Görüntüleri esnek hale getirmek için basitçe max-width:100%ve ekleyin height:auto. Görüntü max-width:100%ve height:autoIE7'de çalışıyor, ancak IE8'de değil (evet, başka bir garip IE hatası). Bunu düzeltmek width:auto\9için IE8 için eklemeniz gerekir .

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

CSS:

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

Ve görüntünün sabit bir maksimum genişliğini zorunlu kılmak istiyorsanız, sadece bir kabın içine yerleştirin, örneğin:

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

JSFiddle örneği burada . JavaScript gerekmez. Chrome, Firefox ve IE'nin en son sürümlerinde çalışır (tüm test ettiğim buydu).

2018 ve sonraki çözüm:

Görüntü alanına bağlı birimleri kullanmak, bir kedi görüntüsüne sahip olduğumuz için hayatınızı kolaylaştırmalıdır:

Şimdi bu kediyi en boy oranlarına saygı gösterirken kodumuzun içinde istiyoruz:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Şimdiye kadar pek ilginç değil, ama kedilerin genişliğini görüntü alanının maksimum% 50'si olacak şekilde değiştirmek istersek ne olur?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Aynı görüntü, ama şimdi sınırlı maksimum genişlikte bir 50vw VW (= görünüm genişliği), görüntü verilen rakam bağlı olarak, x genişlik görünüm olması anlamına gelir. Bu aynı zamanda yükseklik için de geçerlidir:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Bu, görüntünün yüksekliğini görüntü alanının maksimum% 20'si ile sınırlar.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

IE onresizeolayında her piksel değişikliğinde (genişlik veya yükseklik) tetiklenir, bu nedenle performans sorunu olabilir. Javascript'in window.setTimeout () işlevini kullanarak görüntüyü birkaç milisaniye için yeniden boyutlandırmayı geciktirin.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Resize özelliğini her ikisine de ayarlayın. Sonra genişliği ve yüksekliği şu şekilde değiştirebilirsiniz:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

JQuery kullanıyor musunuz?

Çünkü jQuery eklentileri üzerinde hızlı bir arama yaptım ve bunu yapacak bir eklenti var gibi görünüyor, bunu kontrol edin, çalışmalı:

http://plugins.jquery.com/project/jquery-afterresize

DÜZENLE:

Bu CSS çözümü, ben sadece bir style = "width: 100%" ekliyorum ve en azından chrome ve Safari'de benim için çalışıyor. IEE'ye sahip değilim, bu yüzden sadece orada test edin ve bana bildirin, işte kod:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Başlangıçta aşağıdaki html / css kullanıyordum:

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

<div> 
  <img src="..." />
</div>

Sonra ekledi class="img"için <div> böyle:

<div class="img">
  <img src="..." />
</div>

Ve her şey yolunda gitmeye başladı.

scaleGörüntüyü css ile yeniden boyutlandırmak için CSS3 özelliğini kullanabilirsiniz :

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Daha Fazla Okuma :

• CSS3 2D Dönüşümleri
• CSS3 Hover Efekti Geçişleri, Dönüşümleri, Animasyonları

Sadece bu kodu kullanın. Çoğu kişinin unuttuğu şey, maksimum genişliği resmin maksimum genişliği olarak belirlemektir.

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Bu gösterimi kontrol edin http://shorturl.at/nBKVY

Deneyin

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Yalnızca görüntüleme bloğu ve satır içi blok ile çalışır, bunun esnek öğeler üzerinde hiçbir etkisi yoktur, çünkü öğrenmeye uzun süre harcadım.