orantısal görüntü yüksekliği/genişliği nasıl oluşturulur

Question

Bu nedenle, orijinal yüksekliğinin/genişliğinin% 30'u olarak yeniden boyutlandırılan bir resme sahip olmak istiyorum. Yüksekliğini veya genişliğini bilmediğini varsayın, sadece CSS/HTML kullanarak nasıl devam edersiniz?

Answer 1

Güncelleme: Bir display: inline-block; sarıcı kullanılması

, bu sadece CSS ile gerçekleşmesi mümkündür.

HTML

<div class="holder"> 
    <img src="your-image.jpg" /> 
</div> 

CSS

.holder { 
    width: auto; 
    display: inline-block;  
} 

.holder img { 
    width: 30%; /* Will shrink image to 30% of its original width */ 
    height: auto;  
}​ 

sarıcı resmin orijinal genişliğine çöker ve sonra görüntülerde width: 30% CSS kuralı küçülteceğim görüntüyü neden olur Ebeveyn genişliğinin% 30'una kadar (orijinal genişliği).

İşte bir demo in action. ne böyle hesaplamalar yapmak içindir olarak bunu yapmak için

---

Ne yazık ki hiçbir saf HTML/CSS yol. Ancak, bir jQuery snippet'iyle oldukça basit:

$('img.toResizeClass').each(function(){ 

    var $img = $(this), 
     imgWidth = $img.width(), 
     imgHeight = $img.height(); 

    if(imgWidth > imgHeight){ 
     $img.width(imgWidth * 0.3); 
    } else { 
     $img.height(imgHeight * 0.3); 
    } 
}); 

Answer 2

hızlı bir satır içi çözüm gerekirse:

<img style="max-width: 100px; height: auto; " src="image.jpg" />