cómo crear la altura/ancho proporcional de la imagen

Question

Por lo tanto, quiero que una imagen se redimensione al 30% de su altura/ancho original. Pretende que no conoce su altura o ancho, ¿cómo lo haría utilizando solo CSS/HTML?

Answer 1

Actualización:

El uso de un envoltorio display: inline-block;, es posible que esto suceda sólo con 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;  
}​ 

La envoltura se derrumba a la anchura original de la imagen, y luego la regla width: 30% CSS en las imágenes hace que la imagen encoger al 30% del ancho de su padre (que era su ancho original).

Aquí hay un demo in action.

---

Lamentablemente no hay manera de HTML/CSS puro para hacerlo, ya que ni se orienta a realizar cálculos como esas. Sin embargo, es bastante simple con un fragmento de 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

Si necesita una solución rápida en línea:

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