web-dev-qa-db-fra.com

Comment insérer une image (img) dans une div et conserver le rapport de format?

J'ai un 48x48 div et à l'intérieur il y a un élément img, je veux l'intégrer dans le div sans perdre aucune partie, dans le temps le rapport est conservé, est-il réalisable en utilisant HTML et CSS?

htmlcss
116
Bin Chen

Vous aurez besoin de JavaScript pour empêcher le recadrage si vous ne connaissez pas la dimension de l'image au moment de la rédaction du fichier 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 voudrez peut-être en tirer parti.

61
Thomas

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

289
Michael

Malheureusement, max-width + max-height ne couvrent pas complètement 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 object-fit Propriété CSS3.

Article utile: Contrôle des formats 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 )

63
Andrii Verbytskyi

Utilisation de CSS uniquement: 

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

HTML

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

CSS

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

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

Cela permettra à l'image de se développer pour remplir son parent, dont la taille est définie dans la CSS div.

16
alex

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

Je me suis rendu compte que je devais régler l'affichage div pour fléchir, voici donc mon CSS 

div{
display: flex;
}

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

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

Il y a plusieurs choses qui travaillent ensemble:

  • max-height: 100%;, max-width: 100%; et height: auto;, width: auto; font que l'échelle img atteigne la première dimension de 100% tout en conservant les proportions
  • position: relative; dans le conteneur et position: absolute; dans l'enfant ainsi que top: 50%; et left: 50%; centrer le coin supérieur gauche de l'image dans le conteneur
  • transform: translate(-50%, -50%); déplace l'img vers la gauche et le haut de la moitié de sa taille, centrant ainsi l'img 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%);
}
1
VSchlattinger

Essayez CSS:

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

Si vous définissez la photo comme image d'arrière-plan, nous aurons plus de contrôle sur la taille et le placement, laissant ainsi la balise img remplir un objectif différent ...

Ci-dessous, si nous voulons que le div ait le même rapport d'aspect que la photo, alors placeholder.png est une petite image transparente ayant le même rapport d'aspect que photo.jpg. Si la photo est un carré, il s'agit d'un espace réservé de 1px x 1px, si la photo est une vignette vidéo, il s'agit d'un espace réservé de 16x9, etc.

Spécifiquement à la question, utilisez un espace réservé 1x1 pour conserver le rapport carré de la division, avec une image d'arrière-plan utilisant background-size pour conserver le rapport de format de la photo.

J'ai utilisé background-position: center center; pour que la photo soit centrée dans le div. (L'alignement de la photo dans le centre ou le 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 requête http supplémentaire, convertissez l'image de marque de réservation en données: URL .

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

Voici une approche tout en JavaScript. Il réduit progressivement l’image jusqu’à ce qu’elle s’ajuste correctement. Vous choisissez le montant à réduire à chaque échec. 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.

0
Jared Beach

vous pouvez utiliser la classe "img-fluid" pour les versions plus récentes, à savoir Bootstrap v4.

et peut utiliser la classe "img-responsive" pour les versions antérieures, comme Bootstrap v3.

Usage: -

balise img avec: -

classe = "img-fluid"

(src} _ = "..." 

0
Saurabh Sheorain