Auto image redimensionnée en fonction div conteneur

Question

Comment vous auto-redimensionner une image grand afin qu’il rentrera dans une balise div plus petite largeur, tout en maintenant que c’est le ratio largeur : hauteur ?

---

Exemple : stackoverflow.com - quand une image est insérée dans le panneau Editeur, et l’image est trop volumineux pour tenir sur la page, l’image est automatiquement redimensionnée.

Answer 1

N'appliquez pas de largeur ou de hauteur explicite à la balise d'image. Au lieu de cela, donnez-lui:

 max-width:100%;
max-height:100%;
 

Exemple: http://jsfiddle.net/xwrvxser/1/

Answer 2

Actuellement, il n'existe aucun moyen de le faire correctement, de manière déterministe, avec la taille fixe des images en format Jpeg ou PNG.

Pour redimensionner une image en conservant les proportions, vous devez définir soit la hauteur ou la largeur "100%", mais pas les deux. Si vous définissez à la fois à "100%", votre image sera étirée.

Choisir si la hauteur ou la largeur dépend de votre image et de conteneur de dimensions:

1. Si votre image et l'emballage sont à la fois "portrait en forme de" ou bien "façonné" (plus hautes que larges, ou plus larges que hautes, respectivement), alors il n'est pas question que de la hauteur ou de la largeur "de 100%".
2. Si votre image est un portrait, et votre conteneur paysage, vous devez définir height="100%" sur l'image.
3. Si votre image est paysage, et votre conteneur portrait, vous devez définir width="100%" sur l'image.

Si votre image est un SVG, qui est une variable de la taille d'image vectorielle format, vous pouvez avoir l'extension pour s'adapter le conteneur se faire automatiquement.

Vous avez juste à vous assurer que le fichier SVG possède aucune de ces propriétés définies dans l' <svg> balise:

height
width
viewbox

La plupart de dessin vectoriel, hors il y aura définir ces propriétés lors de l'exportation d'un fichier SVG, de sorte que vous devrez modifier manuellement votre fichier chaque fois que vous exportez ou d'écrire un script pour le faire.

Answer 3

Voici une solution qui alignera verticalement et horizontalement votre img dans un div sans aucun étirement, même si l'image fournie est trop petite ou trop grande pour tenir dans le div. Le html:

 <div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
 

Le CSS:

 #myDiv 
{
height:104px;
width:140px;
}
#myDiv img
{
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}
 

Le JQuery:

 var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }
 

J'espère que cela vous aide les gars

Answer 4

Simplifiez-le !
Donner le conteneur fixe height et ensuite pour la balise img l'intérieur de lui définir width et max-height !

 <div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
 

la différence est que vous définissez le width à 100% ! pas le max-width ! Essayez-le;)

Answer 5

Découvrez ma solution: http://codepen.io/petethepig/pen/dvFsA

Il est écrit en CSS pur, sans aucun code JS. Il peut gérer des images de toute taille et de toute orientation.

Étant donné un tel HTML:

 <div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>
 

Le code CSS serait:

 .image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}