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


1513

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.


Quelques bibliothèques intéressantes pour faire le redimensionnement d'image pour s'adapter au conteneur: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z

Mis à part la réponse de Kevin ... Vous pouvez également utiliser des services comme ImageBoss pour créer vos images avec la taille que vous voulez, à la demande. L'ajustement de l'image sur le récipient est excellent, mais le fait de servir les images de manière réactive est très simple.
Igor Escobar


@jolumg Pas tout à fait; Bien qu'il y ait beaucoup de chevauchement dans certaines solutions, il existe également de nombreuses solutions qui ne sont pas interchangeables, car celle-ci demande comment augmenter l'échelle d'une image, alors que celle-ci demande de réduire l'échelle d'une image.
TylerH

1
001 - Ceci est une réponse à votre question posée qui a été fermée avant que je ne la voie. Comment appeler un composant enfant à partir d'un composant parent. J'ai écrit un article de blog expliquant comment faire communiquer les composants à l'aide d'interfaces: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Réponses:


1879

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>


40
Cela ne mettra pas à l'échelle à la fois la hauteur et la largeur.
Neil

75
hauteur: auto; si vous souhaitez spécifier une largeur uniquement
Roi

82
Et si l'image est trop petite?
Scott Rippey

18
@Scott Rippey - Si l'image est plus petite que le conteneur, elle ne changera pas car les règles utilisées sont max-width et max-height.
Surreal Dreams

15
Avec une <a>balise englobante , l'image n'a pas été redimensionnée. L'application des règles à la balise A a résolu ce problème.
SPRBRN

433

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/


39
Cela mettra l'image à l'échelle pour qu'elle s'adapte complètement à la plus grande dimension à l'intérieur du conteneur, de sorte que la plus petite dimension peut ne pas la couvrir complètement. Pour recadrer la plus grande dimension à la place, utilisezobject-fit: cover
Gabriel Grant

4
A fonctionné pour moi - par rapport à la solution de @KevinD - cela n'a PAS changé les proportions dans les cas de bord. À votre santé!
Barnabas Kecskes

9
Ce sera génial lorsqu'il sera entièrement pris en charge. Atm, ni IE ni edge ne le supportent malheureusement.
spectras

2
Si vous souhaitez définir max-width et max-height, vous pouvez le faire. Marche parfaitement .
Sandip Subedi

3
Il semble que cela ne puisse pas être utilisé avec IE11 et Edge 14/15
caniuse.com/#search=object-fit

106

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.


2
Est-ce juste moi ou y a-t-il plusieurs erreurs dans ce post? "'en forme de portrait' ou les deux 'en forme de paysage" (plus larges que hautes et plus hautes que larges, respectivement) "... vos" respectives "ne devraient-elles pas être inversées? Et dans vos puces 2. et 3., ils disent tous les deux "vous devez définir la largeur =" 100% "sur l'image". Je suppose que vous avez copié-collé et oublié de changer l'un de ceux-ci en "hauteur" plutôt qu'en "largeur".
Buttle Butkus

Je l'ai juste réparé. 2 et 3 peuvent maintenant être à la fois faux ou à la fois corrects, au lieu que l'un ait tort et l'autre raison. Je ne me souviens pas quelle est la bonne réponse. ;)
Neil

2
"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."? Cela semble tout simplement incorrect. La réponse de @ Thorn007 fournit un tel moyen, et je l'ai utilisé moi-même - stackoverflow.com/questions/12259736/…
Dan Dascalescu

La réponse de @DanDascalescu Thorn007 n'agrandit pas l'image si elle est plus petite que le conteneur. La meilleure solution de nos jours est d'utiliser un élément avec une image de fond et de définirbackground-size: contain .
Kevin Borders,

"Pour redimensionner une image proportionnellement, vous devez définir la hauteur ou la largeur sur" 100% ", mais pas les deux." <C'est exactement ce qui m'a aidé. Merci
Alexander Santos

77

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

1
CSS fonctionne exactement comme je le souhaite, et j'ai ignoré le bit jQuery
bkwdesign

48

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.


2
Cela entraîne un changement du rapport d'image dans Google Chrome si l'image est très haute et que la fenêtre d'affichage est courte.
Mikko Rantalainen

29

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


Mais il faut utiliser la imgbalise pour mettre des images car c'est mieux qu'en background-imagetermes de référencement car vous pouvez écrire des mots clés dans altla imgbalise. Voici donc que vous pouvez rendre l'image réactive.

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


23

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


Je crois que par "adapter un conteneur div", l'OP signifiait que l'image ne devait pas s'étendre au-delà de l'élément contenant dans l'une ou l'autre dimension. Dans la solution de @JonatasWalker, l'image est rognée. De même, une solution d'arrière-plan peut ne pas être sémantiquement correcte, selon la situation. Par exemple, vous pourriez avoir besoin de altvaleurs et de telles choses (bien que vous puissiez également ajouter une image factice qui est invisible pour les technologies non assistantes), ou vous devrez peut-être la rendre cliquable.
Balázs

@ Balázs ah dans ce cas, le réglage correct serait background-size: containet je pense que j'irais personnellement sur l'image factice simplement parce qu'il n'y a pas vraiment de moyen facile de faire ce qui est décrit ici sans JavaScript
Chuck Dries

@ChuckDries Je ne suis pas vraiment sûr de ce que vous voulez dire, la réponse acceptée résout le problème.
Balázs

22

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

2
Cela ne gère pas les images trop petites.
Josh C

1
@JoshC Que voulez-vous dire? Celui-ci fonctionne bien: codepen.io/petethepig/pen/maeFo
dmitry

2
404 sur les images trop petites.
Josh C

Je voulais souligner que cette méthode fonctionne également avec des conteneurs à largeur variable. Génial travail Dmitry!
Camilo Martin

Une légère modification et c'est parfait: codepen.io/anon/pen/BoQmBw Merci Dmitry.
Alqin

10

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

10

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

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.


8

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

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


5

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.


5

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>

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

2
Si vous pouviez ajouter quelques explications sur votre code, ce serait bien (je sais que vous avez des commentaires ici mais juste quelques mots sur pourquoi / comment cela répond à la question le rendrait beaucoup mieux).
nom affiché est manquant

5

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

5

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


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

Il y a un inconvénient à utiliser cette méthode. Si l'image ne se charge pas, le texte alternatif sera affiché avec le conteneur parent line-height. Si le texte alternatif a plus d'une ligne, il commencera à avoir l'air vraiment mauvais ...
jahu

5

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

4

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

1
Tu veux direvh ? et qu'est-ce qui ne fonctionne pas dans Chrome?
misterManSam

@misterManSam Oui merci beaucoup, j'étais trop fatigué hier quand j'ai posté cette réponse. max-height: xx%(unité de pourcentage) ne fonctionne pas dans Chrome avec certains éléments comme img, mais l' vhunité fonctionne. Cependant, les pourcentages travaillent avec height, width, max-width, etc.
gaborous

4

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 .


4

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.

1
Ce n'est pas une solution très fiable si vous essayez de soutenir l'ensemble du marché. J'évite CSS3, sauf si vous allez avoir une sorte de solution de rechange pour les navigateurs qui ne le prennent pas en charge.
dudewad

4

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


3

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

3

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.


1
La déclaration CSS correcte est «max-height» plutôt que maxHeight dans le cas du chameau.
Mark Townsend

3

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.


1

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>

1

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


-1

Ou vous pouvez simplement utiliser:

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

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


1
il ne s'agit pas d'aligner son de le redimensionner.
Baljeetsingh
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.