sposób tworzenia proporcjonalnego obrazu wysokość/szerokość

Question

Dlatego chcę zmienić rozmiar obrazu do 30% jego pierwotnej wysokości/szerokości. Udawaj, że nie znasz jego wysokości lub szerokości, jak byś się do tego zabrał używając tylko CSS/HTML?

Answer 1

Aktualizacja:

Korzystanie z display: inline-block; opakowanie, jest to możliwe, aby tak się stało tylko CSS.

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;  
}​ 

Owijka wali do pierwotnej szerokości obrazu, a następnie reguła width: 30% CSS na zdjęcia powoduje, że obraz się kurczyć w dół do 30% szerokości rodzica (która była pierwotną szerokością).

Oto demo in action.

---

Niestety nie czysty HTML/CSS sposób to zrobić jak nie jest nastawiona na wykonywanie obliczeń w tym stylu. Jednak jest to dość proste z urywek jQuery:

$('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

Jeśli potrzebujesz szybkiego rozwiązania inline:

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