web-dev-qa-db-fra.com

Comment redimensionner automatiquement une image pour l'adapter à un conteneur 'div'?

Comment redimensionnez-vous automatiquement une grande image afin qu’elle s’intègre dans un conteneur div de largeur inférieure tout en conservant son rapport largeur: hauteur?

Exemple: stackoverflow.com - lorsqu'une image est insérée dans le panneau de l'éditeur et que l'image est trop grande pour tenir sur la page, l'image est automatiquement redimensionnée.

htmlcssimageautoresize
1332
001

N'appliquez pas de largeur ni de hauteur explicites à la balise d'image. Au lieu de cela, donnez-le:

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

Aussi, height: auto; si vous voulez spécifier une largeur uniquement.

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

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
1709
Kevin

object-fit

Il s'avère qu'il existe un autre moyen de le faire.

<img style='height: 100%; width: 100%; object-fit: contain'/>

va faire le travail. C'est du CSS 3.

Violon: http://jsfiddle.net/mbHB4/7364/

343
Shih-Min Lee

À l'heure actuelle, il n'existe aucun moyen de le faire correctement de manière déterministe, avec des images de taille fixe telles que les fichiers JPEG ou PNG.

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

Le choix de la hauteur ou de la largeur dépend de la taille de votre image et de son conteneur:

  1. Si votre image et votre conteneur sont à la fois "en forme de portrait" ou "en paysage" (respectivement, ils sont plus grands que larges ou plus larges que leur hauteur), peu importe la hauteur ou la largeur qui correspondent à "% 100" .
  2. Si votre image est au format portrait et que le conteneur est au format paysage, vous devez définir height="100%" sur l'image.
  3. Si votre image est au format paysage et que votre conteneur est au format portrait, vous devez définir width="100%" sur l'image.

Si votre image est un fichier SVG, qui est un format d'image vectorielle de taille variable, vous pouvez configurer l'extension pour l'adapter au conteneur.

Vous devez simplement vous assurer que le fichier SVG n'a aucune de ces propriétés définies dans la balise <svg>:

height
width
viewbox

La plupart des programmes de dessin vectoriel définissent ces propriétés lors de l'exportation d'un fichier SVG. Vous devrez donc modifier manuellement votre fichier à chaque exportation ou écrire un script pour le faire.

98
Neil

Voici une solution qui aligne verticalement et horizontalement votre image dans une div sans l’étirer, même si l’image fournie est trop petite ou trop grande pour tenir dans la div.

Le contenu HTML:

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

Le contenu CSS:

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

La partie jQuery:

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

Faites simple!

Donnez au conteneur un corrigéheight, puis pour la balise img qui se trouve à l'intérieur, définissez 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 la width sur 100%, et non le max-width.

43
Mehdi Maghrooni

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

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

Étant donné ce code 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;
}
21
dmitry

Vous pouvez définir l'image en tant qu'arrière-plan d'un div, puis utiliser le propriété CSS background-size :

background-size: cover;

It "Ajuste l'image de fond pour qu'elle soit la plus grande possible, de sorte que la zone de fond soit entièrement recouverte par l'image de fond. Certaines parties de l'image de fond peuvent ne pas être visibles dans le positionnement de l'arrière-plan zone " - W3Schools

20
Chuck Dries

Je viens de publier un plugin jQuery qui fait exactement ce dont vous avez besoin avec beaucoup d'options:

https://github.com/GestiXi/image-scale

Usage:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});
9
Nicolas BADIA

Cette solution n’étire pas l’image et ne remplit pas le conteneur en entier, mais elle en découpe une partie.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}
9
Miia Klingstedt

Ce qui suit fonctionne parfaitement pour moi:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
7
Chong Lip Phang

J'ai une solution bien meilleure sans avoir besoin de JavaScript. Il est totalement réactif et je l’utilise beaucoup. Vous devez souvent adapter une image de n'importe quel rapport d'aspect à un élément conteneur avec un rapport d'aspect spécifié. Et avoir tout ce processus pleinement réactif est un must.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Vous pouvez définir la largeur maximale et la hauteur maximale indépendamment; l'image respectera la plus petite (en fonction des valeurs et du format de l'image). Vous pouvez également définir une image à aligner à votre guise (par exemple, pour une image de produit sur un fond blanc infini, vous pouvez la positionner facilement au centre, en bas).

6
actimel

Vous devez indiquer au navigateur à quelle hauteur vous le placez:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
5
Rick

Le code ci-dessous est adapté des réponses précédentes et est testé par moi-même à l’aide d’une image appelée storm.jpg.

C'est le code HTML complet pour une page simple qui affiche l'image. Cela fonctionne parfaitement et a été testé par moi avec www.resizemybrowser.com. Placez le code CSS en haut de votre code HTML, sous votre section head. Placez le code de l'image où vous le souhaitez.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>
5
dan

J'ai centré et redimensionné proportionnellement une image dans un hyperlien horizontalement et verticalement de cette façon:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Il a été testé dans Internet Explorer, Firefox et Safari.

Plus d'informations sur le centrage est ici .

4
bancer
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>
4
easd

Donnez la hauteur et la largeur dont vous avez besoin pour votre image au div qui contient la balise <img>. N'oubliez pas de donner la hauteur/largeur dans la balise de style appropriée.

Dans la balise <img>, donnez le max-height et le max-width à 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Vous pouvez ajouter les détails dans les classes appropriées après avoir bien compris.

4
AZD

Édition: Le positionnement d'image basé sur une table précédent posait problème dans Internet Explorer 11 (max-height ne fonctionne pas dans les éléments display:table). Je l'ai remplacé par un positionnement en ligne qui fonctionne non seulement dans Internet Explorer 7 et Internet Explorer 11, mais qui nécessite également moins de code.

Voici mon point de vue sur le sujet. Cela ne fonctionnera que si le conteneur a une taille spécifiée (max-width et max-height ne semblent pas s'entendre avec des conteneurs sans taille concrète), mais j'ai écrit le contenu CSS dans un manière qui permet sa réutilisation (ajoutez picture-frame class et px125 class class à votre conteneur existant).

En CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Et en HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Edit: Améliorations supplémentaires possibles avec JavaScript (upscaling images)

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});
4
jahu

La réponse acceptée par Thorn007 ne fonctionne pas lorsque l'image est trop petite .

Pour résoudre ce problème, j'ai ajouté un facteur d'échelle . De cette façon, cela agrandit l'image et remplit le conteneur div.

Exemple:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-Origin:left top;" />
</div>

Remarques:

  1. Pour WebKit, vous devez ajouter -webkit-transform:scale(4); -webkit-transform-Origin:left top; dans le style.
  2. Avec un facteur d'échelle de 4, vous avez max-width = 400/4 = 100 et max-height = 200/4 = 50
  3. Une autre solution consiste à définir la largeur maximale et la hauteur maximale à 25%. C'est encore plus simple.
4
user217447

Je vois que beaucoup de gens sont suggestion object-fit , ce qui est une bonne option. Mais si vous voulez aussi travailler dans anciens navigateurs , il existe un autre moyen de le faire facilement.

S'il vous plaît vérifier ma réponse ici: IE et correctif Edge pour object-fit: cover;

C'est assez simple. L’approche que j’ai choisie consistait à positionner l’image à l’intérieur du conteneur avec absolute , puis et placez-la au centre en utilisant la combinaison:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Une fois au centre, je donne à l'image,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Cela donne à l'image l'effet de Object-fit: cover.

Voici une démonstration de la logique ci-dessus.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Cette logique fonctionne dans tous les navigateurs.

3
Mohammed Furqan Rahamath M

Comme répondu ici , vous pouvez également utiliser vh unités au lieu de max-height: 100% si cela ne fonctionne pas sur votre navigateur (comme Chrome):

img {
    max-height: 75vh;
}
3
gaborous

Une solution simple (solution en 4 étapes !!) qui semble fonctionner pour moi est la suivante. L'exemple utilise la largeur pour déterminer la taille totale, mais vous pouvez également l'inverser pour utiliser plutôt la hauteur.

  1. Appliquer un style CSS au conteneur d'images (par exemple, <img>)
  2. Définissez la propriété width sur la dimension souhaitée
    • Pour les dimensions, utilisez % pour la taille relative ou la mise à l'échelle automatique (en fonction du conteneur d'image ou de l'affichage).
    • Utilisez px (ou autre) pour une cote statique ou définie
  3. Définissez la propriété height à ajuster automatiquement, en fonction de la largeur
  4. PRENDRE PLAISIR!

Par exemple,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/Host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
2
young chisango

Toutes les réponses fournies, y compris celle acceptée, fonctionnent uniquement en supposant que l'encapsuleur div a une taille fixe. Voici donc comment faire quelle que soit la taille de l’encapsuleur div, ce qui est très utile si vous développez une page responsive:

Ecrivez ces déclarations dans votre sélecteur DIV:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Placez ensuite ces déclarations dans votre sélecteur IMG:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

TRES IMPORTANT:

La valeur de maxHeight doit être la même chose pour DIV et IMG sélecteurs.

2
Billal Begueradj

J'ai résolu ce problème en utilisant le code suivant:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}
2
Serkan KONAKCI

Si vous utilisez Bootstrap, il vous suffit d’ajouter la classe img-responsive à la balise img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Images Bootstrap

1
HoangYell

Une solution simple consiste à utiliser flexbox. Définissez le CSS du conteneur sur:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Ajustez la largeur de l’image contenue à 100% et vous obtiendrez une image Nice centrée dans le conteneur avec les dimensions préservées.

1
Mateo Marin

La solution est facile avec un peu de maths ...

Il suffit de placer l'image dans un div, puis dans le fichier HTML où vous spécifiez l'image. Définissez les valeurs de largeur et de hauteur en pourcentage en utilisant les valeurs en pixels de l'image pour calculer le rapport exact entre largeur et hauteur.

Par exemple, supposons que votre image ait une largeur de 200 pixels et une hauteur de 160 pixels. Vous pouvez dire en toute sécurité que la valeur de la largeur sera de 100%, car il s'agit de la valeur la plus grande. Pour calculer ensuite la valeur de la hauteur, il suffit de diviser la hauteur par la largeur, ce qui donne la valeur en pourcentage de 80%. Dans le code, cela ressemblera à quelque chose comme ça ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>
0
user2796283