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


Comment redimensionner automatiquement une grande image de sorte qu'elle puisse tenir dans un conteneur div de largeur inférieure tout en conservant sa largeur: rapport de 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.


1078
2018-06-12 17:00


origine


Réponses:


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

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

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>


1436
2018-06-12 17:03



https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Il s'avère qu'il y a une autre façon de le faire.

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

fera le travail. C'est du CSS3.

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


237
2018-06-12 02:48



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 non plus la hauteur ou la largeur à "100%", mais pas les deux. Si vous réglez 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 les deux «en forme de portrait» ou les deux «en forme de paysage» (plus grand que large ou plus large que haut, respectivement), peu importe la hauteur ou la largeur de «% 100» .
  2. Si votre image est portrait, et votre conteneur est paysage, vous devez définir height="100%" sur l'image.
  3. Si votre image est paysage et votre conteneur est 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 faire en sorte que l'extension adaptée au conteneur se fasse automatiquement.

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

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 fois que vous l'exportez ou écrire un script pour le faire.


93
2018-06-11 20:13



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


65
2017-10-04 09:40



Faites simple!

Donnez au conteneur un fixé  height puis pour le img tag à l'intérieur de l'ensemble 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 être 100% pas le max-width.


37
2017-09-25 08:45



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 n'importe quelle taille et de n'importe quelle 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;
}

19
2018-06-28 18:26



Vous pouvez définir l'image comme arrière-plan d'un div, puis utiliser le css propriété de taille d'arrière-plan 

background-size: cover;

et "Scale l'image d'arrière-plan pour qu'elle soit la plus grande possible afin que la zone d'arrière-plan soit complètement couverte par l'image d'arrière-plan." "Certaines parties de l'image d'arrière-plan peuvent ne pas être visibles." -w3schools.com


17
2017-12-16 12:37



Un beau hack.

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

  1. Quand 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écuter ici


Mais il faut utiliser img tag pour mettre des images car c'est mieux que background-image en terme de SEO comme tu peux écrire mot-clé dans le alt du img marque. Donc, ici, vous pouvez rendre l'image sensible.

  1. Lorsque l'image est dans img marque.
#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écuter ici


12
2018-02-21 07:45



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

}

9
2017-08-07 11:54



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>

JS

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

8
2017-08-06 15:31



J'ai beaucoup mieux la solution sans besoin de tout JS. C'est complètement réactif et je l'utilise beaucoup. Vous devez souvent adapter l'image de n'importe quel format à l'élément conteneur avec le format spécifié. Et avoir tout entière cette réponse 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 indépendamment la largeur maximale et la hauteur maximale, l'image respectera la plus petite (en fonction des valeurs et du format de l'image). Vous pouvez également définir l'image à aligner comme vous le souhaitez (par exemple, pour l'image du produit sur fond blanc infini, vous pouvez le positionner au centre du fond facilement)


6
2018-01-13 19:00