Comment ajuster une image (img) dans un div et conserver le rapport hauteur / largeur?

J'ai un div 48x48 et à l'intérieur il y a un élément img, je veux l'insérer dans le div sans perdre aucune partie, en attendant le rapport est conservé, est-ce réalisable en utilisant html et css?

Vous aurez besoin de JavaScript pour empêcher le recadrage si vous ne connaissez pas la dimension de l'image au moment où vous écrivez le css.

HTML et JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Si vous utilisez une bibliothèque JavaScript, vous souhaiterez peut-être en profiter.

Utilisez max-height:100%; max-width:100%;pour l'image à l'intérieur du div.

Malheureusement max-width + max-height ne couvrent pas entièrement ma tâche ... J'ai donc trouvé une autre solution:

Pour enregistrer le rapport d'image lors de la mise à l'échelle, vous pouvez également utiliser la object-fitpropriété CSS3.

Article utile: contrôler les proportions d'image avec CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Mauvaise nouvelle: IE non pris en charge ( puis-je utiliser )

Utilisation de CSS uniquement:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Cela fera agrandir l'image pour remplir son parent, dont sa taille est définie dans le divCSS.

J'avais beaucoup de problèmes pour que cela fonctionne, chaque solution que j'ai trouvée ne semblait pas fonctionner.

J'ai réalisé que je devais régler l'affichage div sur flex, donc en gros, voici mon CSS:

div{
display: flex;
}

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

Essayez CSS:

img {
  object-fit: cover;
  height: 48px;
}

Pour moi, le CSS suivant a fonctionné (testé dans Chrome, Firefox et Safari).

Il y a plusieurs choses qui fonctionnent ensemble:

• max-height: 100%;, max-width: 100%;et height: auto;, width: auto;mettez l'image à l'échelle selon la dimension qui atteint en premier 100% tout en conservant le rapport hauteur / largeur
• position: relative;dans le conteneur et position: absolute;dans l'enfant avec top: 50%;et left: 50%;centrer le coin supérieur gauche de l'image dans le conteneur
• transform: translate(-50%, -50%); déplace l'image vers la gauche et le haut de la moitié de sa taille, centrant ainsi l'image dans le conteneur

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Définir la photo comme image d'arrière-plan nous donnera plus de contrôle sur la taille et le placement, laissant la balise img servir un objectif différent ...

Ci-dessous, si nous voulons que le div ait le même rapport hauteur / largeur que la photo, alors placeholder.png est une petite image transparente avec le même rapport hauteur / largeur que photo.jpg. Si la photo est un carré, c'est un espace réservé 1px x 1px, si la photo est une vignette vidéo, c'est un espace réservé 16x9, etc.

Spécifique à la question, utilisez un espace réservé 1x1 pour maintenir le rapport carré de la div, avec une image d'arrière-plan en utilisant background-sizepour maintenir le rapport hauteur / largeur de la photo.

Je l'ai utilisé background-position: center center;pour que la photo soit centrée dans le div. (Aligner la photo au centre ou en bas vertical deviendrait moche avec la photo dans la balise img.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Pour éviter une demande supplémentaire http, convertir l'image de l' espace réservé à une donnée: URL .

<img src="data:image/png;base64,..."/>

vous pouvez utiliser la classe "img-fluid" pour une version plus récente, à savoir Bootstrap v4 .

et peut utiliser la classe "img-responsive" pour les anciennes versions comme Bootstrap v3 .

Utilisation : -

balise img avec: -

class = "img-fluide"

src = "..."

Voici une approche entièrement JavaScript. Il redimensionne progressivement une image jusqu'à ce qu'elle s'adapte correctement. Vous choisissez combien de réduire à chaque fois qu'il échoue. Cet exemple le réduit de 10% à chaque fois qu'il échoue:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

N'hésitez pas à copier et coller directement.

Ce qui a fonctionné pour moi était:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

inline-flex était nécessaire pour empêcher les images de sortir de la division.