web-dev-qa-db-fra.com

CSS force l'image redimensionner et conserver les proportions

Je travaille avec des images et j'ai rencontré un problème de format d'image.

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

Comme vous pouvez le constater, height et width sont déjà spécifiés. J'ai ajouté la règle CSS pour les images:

img {
  max-width:500px;
}

Mais pour big_image.jpg, je reçois width=500 et height=600. Comment puis-je redimensionner les images tout en conservant leurs proportions?.

cssimageaspect-ratio
479
moonvader
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 réduira l'image si elle est trop grande pour une zone spécifiée (inconvénient, l'image ne sera pas agrandie).

671
setec

Les solutions ci-dessous permettront d’agrandir et d’agrandir l’image, en fonction de la largeur de la boîte parente.

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

Meilleure pratique (2018):

Cette solution indique au navigateur de rendre l'image avec la largeur maximale disponible et d'ajuster la hauteur en tant que 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 d'amateur:

Avec la solution la 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 format de l'image, par exemple:

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

640/220 = 2.909
100/2.909 = 34.37%

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

207
Aternus

J'ai eu beaucoup de mal à résoudre ce problème et je suis finalement arrivé à cette solution simple:

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

Vous pouvez ajuster la largeur et la hauteur à vos besoins, et la propriété object-fit fera le rognage pour vous.

À votre santé.

186
Théo T. Carranza

La propriété background-size est, par exemple, uniquement> = 9, mais si cela vous convient, vous pouvez utiliser un div avec background-image et définir background-size: contain:

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

Vous pouvez maintenant définir votre taille de div comme bon vous semble. Non seulement l’image conservera son rapport d’aspect, mais elle sera également centralisée à la fois verticalement et horizontalement. N'oubliez pas de définir les tailles sur le fichier css car les divs n'ont pas l'attribut width/height sur la balise elle-même.

Cette approche est différente de celle de setecs, la zone d’image sera constante et définie par vous (en laissant des espaces vides horizontalement ou verticalement en fonction de la taille de la div et du format de l’image), tandis que la réponse de setecs vous fournira une taille de l'image mise à l'échelle (sans espaces vides).

Edit: Selon le documentation MDN de la taille de l’arrière-plan , vous pouvez simuler la propriété de la taille de l’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 non standard -ms-filter:

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

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

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

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

Supprimez la propriété "height".

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

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

Facultativement, pour limiter les surdimensionnements:

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

Il suffit d’ajouter ceci à votre css, il sera automatiquement réduit et étendu en conservant le ratio initial.

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

Il n'existe pas de méthode standard pour conserver les proportions des images avec width, height et max-width spécifiés ensemble.

Nous sommes donc obligés soit de spécifier width et height pour empêcher les "sauts" de page lors du chargement d'images, soit d'utiliser max-width et de ne pas spécifier les dimensions des images.

Spécifier simplement width (sans height) n'a généralement aucun sens, mais vous pouvez essayer de remplacer l'attribut HTML height HTML en ajoutant une règle telle que IMG {height: auto; } dans votre feuille de style.

Voir aussi le Firefox associé bug 392261 .

8
Marat Tanalin

Pour conserver une image réactive tout en la contraignant à respecter un certain rapport d'aspect, procédez comme suit:

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 à l'adresse http://codepen.io/Kseso/pen/bfdhg . Vérifiez cette URL pour plus de ratios et un exemple de travail.

5
Remi

Définissez la classe CSS de votre balise 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;
}
5
Aleksandar Toplek

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

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

Et cela sera utile pour traiter avec une taille d'écran différente .

Les astuces sont

  1. Utiliser padding-top pour définir la hauteur à partir de la largeur.
  2. Utiliser position: absolute pour placer une image dans l'espace de remplissage.
  3. Utilisez max-height and max-width pour vous assurer que l'image ne recouvrira pas l'élément parent.
  4. en utilisant display:block and margin: auto pour centrer l'image.

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

Je trouve également d'autres moyens d'y arriver. Il n’y aura pas d’image réelle en HTML, donc j’ai personnellement la meilleure réponse lorsque j’ai besoin de l’élément "img" en HTML.

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

image d'arrière-plan avec Word au dessus http://jsfiddle.net/4660s79h/1 /

le concept d'utilisation de la position absolue est à partir d'ici http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

5
Choco Li

Pour forcer une image d’une taille exacte, il n’est pas nécessaire 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">
4
aislamfaisal

Vous pouvez utiliser ceci:

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

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 styler:

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

Cela réduira l'image si elle est trop grande pour une zone spécifiée (inconvénient, l'image ne sera pas agrandie).

La solution de setec convient parfaitement pour "Réduire au format" en mode automatique. Mais pour que EXPAND soit parfaitement adapté au mode "auto", vous devez d’abord placer l’image reçue dans un ID de temp. Vérifiez si elle peut être agrandie en hauteur ou en largeur (en fonction de son rapport d’aspect 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 sauvegarder sur votre serveur au format Small Small plutôt que dans leur version agrandie pour remplir votre grand écran afin d’économiser sur la taille et la bande passante.

1
Yselection Rajeev Shukla

Pourquoi ne pas utiliser un pseudo-élément pour un alignement vertical? Cette moins de code est pour un carrousel mais je suppose que cela fonctionne sur chaque conteneur de taille fixe. Il conservera le rapport de format et insérera des barres @ gris-sombres en haut/en bas ou à gauche/en écriture 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;
      }
    }
0
Paul Bormans

Présentation plein écran:

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

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

0
John
img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
0
Flimm