Je travaille avec des images et j'ai rencontré un problème de rapport hauteur / largeur.

<img src="big_image.jpg" width="900" height="600" alt="" />

Comme vous pouvez le voir, heightet widthsont déjà spécifiés. J'ai ajouté une règle CSS pour les images:

img {
  max-width:500px;
}

Mais pour big_image.jpg, je reçois width=500et height=600. Comment définir des images à redimensionner, tout en conservant leurs proportions.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Cela fera rétrécir l'image si elle est trop grande pour la zone spécifiée (comme inconvénient, cela n'agrandira pas l'image).

J'ai eu du mal avec ce problème, et j'ai finalement trouvé cette solution simple:

object-fit: cover;
width: 100%;
height: 250px;

Vous pouvez ajuster la largeur et la hauteur en fonction de vos besoins, et la propriété d'ajustement d'objet fera le recadrage pour vous.

À votre santé.

Les solutions ci-dessous permettront d'augmenter et de réduire l'échelle de l'image , selon la largeur de la boîte parent.

Toutes les images ont un conteneur parent avec une largeur fixe à des fins de démonstration uniquement . En production, ce sera la largeur de la boîte parent.

Meilleure pratique (2018):

Cette solution indique au navigateur de rendre l'image avec la largeur maximale disponible et d'ajuster la hauteur en pourcentage de cette largeur.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solution plus sophistiquée:

Avec la solution plus sophistiquée, vous pourrez recadrer l'image quelle que soit sa taille et ajouter une couleur d'arrière-plan pour compenser le recadrage.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Pour la ligne spécifiant le remplissage, vous devez calculer le rapport d'aspect de l'image, par exemple:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Ainsi, le rembourrage supérieur = 34,37%.

La propriété background-size est ie> = 9 seulement, mais si cela vous convient, vous pouvez utiliser un div avec background-imageet définir background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Maintenant, vous pouvez simplement définir la taille de votre div à tout ce que vous voulez et non seulement l'image gardera son rapport d'aspect, elle sera également centralisée à la fois verticalement et horizontalement dans le div. N'oubliez pas de définir les tailles sur le CSS, car les divs n'ont pas l'attribut width / height sur la balise elle-même.

Cette approche est différente de la réponse des setecs, en utilisant cela, la zone d'image sera constante et définie par vous (en laissant des espaces vides horizontalement ou verticalement en fonction de la taille div et du rapport hauteur / largeur de l'image), tandis que la réponse des setecs vous donnera une boîte qui exactement taille de l'image mise à l'échelle (sans espaces vides).

Modifier: selon la documentation de taille d'arrière-plan MDN, vous pouvez simuler la propriété de taille d'arrière-plan dans IE8 à l'aide d'une déclaration de filtre propriétaire:

Bien qu'Internet Explorer 8 ne prenne pas en charge la propriété background-size, il est possible d'émuler certaines de ses fonctionnalités à l'aide de la fonction de filtre -ms non standard:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Très similaire à certaines réponses ici, mais dans mon cas, j'avais des images qui étaient parfois plus hautes, parfois plus grandes.

Ce style a fonctionné comme un charme pour s'assurer que toutes les images utilisent tout l'espace disponible, gardent le rapport et non les coupes:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Supprimez la propriété "height".

<img src="big_image.jpg" width="900" alt=""/>

En spécifiant les deux, vous modifiez le rapport d'aspect de l'image. Le simple fait d'en définir un redimensionnera mais conservera le rapport hauteur / largeur.

Facultativement, pour limiter les surdimensionnements:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Ajoutez simplement ceci à votre css, il se rétrécira et s'élargira automatiquement en conservant le rapport d'origine.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Il n’existe aucun moyen standard de conserver le rapport d’aspect des images avec width, heightetmax-width spécifié en même temps.

Nous sommes donc obligés soit de préciser width et heightd’empêcher les sauts de page lors du chargement des images, soit d’utilisermax-width et non de spécifier les dimensions des images.

Spécifier juste width (sans height) n'a généralement pas beaucoup de sens, mais vous pouvez essayer de remplacer l' heightattribut HTML en ajoutant une règle commeIMG {height: auto; } dans votre feuille de style.

Voir aussi le bug Firefox 392261 associé .

Voici une solution:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Cela garantira que l'image couvre toujours l'ensemble du parent (mise à l'échelle vers le bas et vers le haut) et conserve le même rapport hauteur / largeur.

Définissez la classe CSS de votre balise de conteneur d'image sur image-class:

<div class="image-full"></div>

et ajoutez ceci à votre feuille de style CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Pour conserver une image réactive tout en imposant à l'image un certain rapport d'aspect, vous pouvez effectuer les opérations suivantes:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Et SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Cela peut être utilisé pour appliquer un certain rapport d'aspect, quelle que soit la taille de l'image que les auteurs téléchargent.

Merci à @Kseso sur http://codepen.io/Kseso/pen/bfdhg . Vérifiez cette URL pour plus de ratios et un exemple de travail.

Pour forcer une image qui tient dans une taille exacte, vous n'avez pas besoin d'écrire trop de codes. C'est si simple

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Voici la réponse si vous voulez mettre une image avec un pourcentage de largeur fixe , mais pas un pixel de largeur fixe .

Et cela sera utile pour gérer différentes tailles d'écran .

Les astuces sont

1. Utiliser padding-toppour régler la hauteur à partir de la largeur.
2. Utiliser position: absolutepour placer l'image dans l'espace de remplissage.
3. Utilisez max-height and max-widthpour vous assurer que l'image ne dépassera pas l'élément parent.
4. avec display:block and margin: autopour centrer l'image.

J'ai également commenté la plupart des astuces à l'intérieur du violon.

Je trouve également d'autres moyens d'y parvenir. Il n'y aura pas d'image réelle en html, donc je personnalise personnellement la première réponse quand j'ai besoin de l'élément "img" en html.

css simple en utilisant le fond http://jsfiddle.net/4660s79h/2/

image de fond avec mot en haut http://jsfiddle.net/4660s79h/1/

le concept pour utiliser la position absolue est d'ici http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Vous pouvez utiliser ceci:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Vous pouvez créer un div comme ceci:

<div class="image" style="background-image:url('/to/your/image')"></div>

Et utilisez ce CSS pour le styliser:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Je suggérerais que pour une approche réactive, la meilleure pratique serait d'utiliser les unités de fenêtre et les attributs min / max comme suit:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Cela fera rétrécir l'image si elle est trop grande pour la zone spécifiée (comme inconvénient, cela n'agrandira pas l'image).

La solution de setec est très bien pour "Shrink to Fit" en mode automatique. Mais, pour AGRANDIR de manière optimale pour tenir en mode 'auto', vous devez d'abord mettre l'image reçue dans un identifiant temporaire, vérifiez si elle peut être agrandie en hauteur ou en largeur (en fonction de son rapport d'aspect v / s le rapport d'aspect de votre bloc d'affichage),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Cette approche est utile lorsque les images reçues sont plus petites que la zone d'affichage. Vous devez les enregistrer sur votre serveur en taille originale petite plutôt que dans leur version étendue pour remplir votre boîte d'affichage plus grande afin d'économiser sur la taille et la bande passante.

Que diriez-vous d'utiliser un pseudo-élément pour l'alignement vertical? Ce moins de code est pour un carrousel mais je suppose que cela fonctionne sur tous les conteneurs de taille fixe. Il conservera le rapport hauteur / largeur et insérera @ barres gris-foncé en haut / en bas ou à gauche / écrire pour la dimension la plus courte. En attendant, l'image est centrée horizontalement par l'alignement du texte et verticalement par le pseudo-élément.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Présentation plein écran:

img[data-attribute] {height: 100vh;}

Gardez à l'esprit que si la hauteur du port de vue est supérieure à l'image, l'image se dégradera naturellement par rapport à la différence.

Je pense, enfin que c'est la meilleure solution, simple et simple :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}