web-dev-qa-db-fra.com

comment créer une hauteur / largeur d'image proportionnelle

Donc, je veux avoir une image redimensionnée à 30% de sa hauteur/largeur d'origine. Imaginez que vous ne connaissez pas sa hauteur ou sa largeur, comment feriez-vous en utilisant uniquement CSS/HTML?

htmlcssimage-resizing
15
PizzaPie

Mise à jour:

Utilisant un display: inline-block; wrapper, il est possible de faire cela avec CSS uniquement.

[~ # ~] 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;    
}​

L'encapsuleur se réduit à la largeur d'origine de l'image, puis le width: 30% La règle CSS sur les images réduit l'image à 30% de la largeur de son parent (qui était sa largeur d'origine).

Voici une démo en action .

Malheureusement, aucun moyen HTML/CSS pur de le faire, car aucun n'est conçu pour effectuer des calculs comme celui-ci. Cependant, c'est assez simple avec un extrait 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);
    }
});
29
Pat

Si vous avez besoin d'une solution en ligne rapide:

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