Comment redimensionner automatiquement une grande image afin qu'elle tienne dans un conteneur div de plus petite largeur 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.

N'appliquez pas de largeur ou de hauteur explicite à la balise d'image. Donnez-lui plutôt:

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

Aussi, height: auto;si vous souhaitez 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>

ajustement aux objets

Il s'avère qu'il existe une autre façon de procéder.

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

fera le travail. C'est des trucs CSS 3.

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

Actuellement, il n'y a aucun moyen de le faire correctement de manière déterministe, avec des images de taille fixe telles que des fichiers JPEG ou PNG.

Pour redimensionner une image proportionnellement, vous devez définir soit la hauteur ou la largeur à « 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 l'image et des dimensions du conteneur:

1. Si votre image et votre conteneur sont tous deux "en forme de portrait" ou tous les deux "en forme de paysage" (plus haut que large ou plus large que haut, respectivement), alors peu importe la hauteur ou la largeur qui sont "% 100" .
2. Si votre image est portrait et votre conteneur est paysage, vous devez définir height="100%"l'image.
3. Si votre image est en paysage et que votre conteneur est en portrait, vous devez définir width="100%"l'image.

Si votre image est un SVG, qui est un format d'image vectorielle de taille variable, vous pouvez faire en sorte que l'extension pour s'adapter au conteneur se produise automatiquement.

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

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.

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 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);
    }

Faites simple!

Donnez au conteneur une valeur fixe height , puis pour la imgbalise à l'intérieur, définissez widthet max-height.

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

La différence est que vous définissez width100%, pas le max-width.

Un beau hack.

Vous avez deux façons de rendre l'image réactive.

1. Lorsqu'une image est une image d'arrière-plan.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Exécutez-le ici

2. Lorsque l'image est dans la imgbalise.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Exécutez-le ici

Vous pouvez définir l'image comme arrière-plan sur un div, puis utiliser la propriété CSS background-size :

background-size: cover;

Il "redimensionnera l'image d'arrière-plan pour qu'elle soit aussi grande que possible afin que la zone d'arrière-plan soit entièrement recouverte par l'image d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être visibles dans la zone de positionnement d'arrière-plan" - W3Schools

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é 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;
}

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();
});

Cette solution n'étire pas l'image et remplit tout le conteneur, mais elle coupe une partie de l'image.

HTML:

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

CSS:

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

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

Je vois que beaucoup de gens ont suggéré l' ajustement d'objet, ce qui est une bonne option. Mais si vous souhaitez que cela fonctionne également dans les anciens navigateurs , il existe une autre façon de le faire facilement.

C'est assez simple. L'approche que j'ai prise était de positionner l'image à l'intérieur du conteneur avec de l' absolu puis de la placer directement 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 l'ajustement d'objet: couverture.

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

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

Cette logique fonctionne dans tous les navigateurs.

Ce qui suit fonctionne parfaitement pour moi:

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

J'ai une bien meilleure solution sans avoir besoin de JavaScript. Il est entièrement réactif et je l'utilise beaucoup. Vous devez souvent adapter une image de n'importe quel rapport hauteur / largeur à un élément conteneur avec un rapport hauteur / largeur spécifié. Et avoir tout cela 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 max et la hauteur max indépendamment; l'image respectera la plus petite (en fonction des valeurs et du rapport hauteur / largeur de l'image). Vous pouvez également définir l'image pour qu'elle soit alignée comme vous le souhaitez (par exemple, pour une image de produit sur un fond blanc infini, vous pouvez la positionner facilement au centre en bas).

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

Dans la balise <img>, donnez le max-heightet max-widthcomme 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.

Le code ci-dessous est adapté des réponses précédentes et est testé par mes soins à l'aide d'une image appelée storm.jpg .

Il s'agit du code HTML complet d'une page simple qui affiche l'image. Cela fonctionne parfaitement et a été testé par moi avec www.resizemybrowser.com. Mettez le code CSS en haut de votre code HTML, sous votre section head. Mettez le code d'image où vous voulez que l'image.

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

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

Vous devez indiquer au navigateur la hauteur de l'endroit où vous le placez:

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

Modifier: le positionnement d'image basé sur une table précédente avait des problèmes dans Internet Explorer 11 ( max-heightne fonctionne pas dans les display:tableéléments). Je l'ai remplacé par un positionnement en ligne qui fonctionne non seulement correctement dans Internet Explorer 7 et Internet Explorer 11, mais il 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-widthet max-heightne semble pas s'entendre avec des conteneurs qui n'ont pas de taille concrète), mais j'ai écrit le contenu CSS d'une manière qui permet de le réutiliser (ajouter une picture-frameclasse etpx125 classe de taille à 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élioration supplémentaire possible en utilisant JavaScript (mise à l'échelle des 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) };
});

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%;
}

Comme indiqué ici , vous pouvez également utiliser des vhunités plutôt que max-height: 100%si cela ne fonctionne pas sur votre navigateur (comme Chrome):

img {
    max-height: 75vh;
}

J'ai centré et mis à l'échelle proportionnellement une image à l'intérieur d'un lien hypertexte à la fois 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.

Vous trouverez plus d'informations sur le centrage ici .

La réponse acceptée de 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, il 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.

Si vous utilisez Bootstrap, il vous suffit d'ajouter la img-responsiveclasse à la imgbalise:

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

Images Bootstrap

Une solution simple (correction en 4 étapes !!) qui semble fonctionner pour moi, est ci-dessous. L'exemple utilise la largeur pour déterminer la taille globale, mais vous pouvez également la retourner pour utiliser la hauteur à la place.

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'images ou de l'affichage)
   • Utiliser px(ou autre) pour une dimension statique ou définie
3. Définissez la propriété height pour qu'elle s'ajuste 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"
/>

Toutes les réponses fournies, y compris la réponse acceptée, ne fonctionnent que dans l'hypothèse où le divwrapper est de taille fixe. Voici donc comment le faire quelle que soit la taille du divwrapper et c'est très utile si vous développez une page responsive:

Écrivez ces déclarations dans votre DIVsélecteur:

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

Mettez ensuite ces déclarations dans votre IMGsélecteur:

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

TRÈS IMPORTANT:

La valeur de maxHeightdoit être la même pour les sélecteurs DIVet IMG.

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

.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 devriez obtenir une belle image centrée dans le conteneur avec les dimensions préservées.

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

Placez simplement 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 pourcentages à l'aide des valeurs de pixels de l'image pour calculer le rapport exact de la largeur à la hauteur.

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

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

La façon la plus simple de le faire est d'utiliser object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

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

Si vous utilisez Bootstrap, ajoutez simplement la img-responsiveclasse et passez à

.container img{
    object-fit: cover;
}

Vérifiez ma réponse, Rendez une image réactive - la manière la plus simple -

img{
    width: 100%;
    max-width: 800px;
}

Ou vous pouvez simplement utiliser:

background-position:center;
background-size:cover;

Maintenant, l'image prendra tout l'espace du div.