Comment adapter une image (img) à l’intérieur d’un div et conserver les proportions?

J’ai un div 48×48 et à l’intérieur il y a un élément img, je veux l’installer dans le div sans perdre aucune partie, pendant que le ratio est conservé, est-il possible d’utiliser 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

CSS

 #container { width: 48px; height: 48px; } #container img { width: 100%; } 

Si vous utilisez une bibliothèque JavaScript, vous pouvez en profiter.

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

Malheureusement, max-width + max-height ne couvre 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 la propriété CSS3 object-fit objects.

Article utile: Contrôlez les 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 )

En utilisant uniquement CSS:

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

HTML

 

CSS

 div { width: 48px; height: 48px; } div img { display: block; width: 100%; } 

Cela rendra l’image étendue pour remplir son parent, dont la taille est définie dans le div CSS.

J’avais beaucoup de problèmes pour que cela fonctionne, chaque solution que je trouvais ne semblait pas fonctionner.

Je me suis rendu compte que je devais régler l’affichage div sur flex, donc en gros c’est mon CSS:

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

Définir la photo comme une image d’arrière-plan nous donnera plus de contrôle sur la taille et le placement, laissant la balise img à des fins différentes …

Ci-dessous, si vous voulez que le div ait le même rapport d’aspect que la photo, https://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio/placeholder.png est une petite image transparente avec le même rapport d’aspect que photo.jpg. Si la photo est un carré, il s’agit d’un espace réservé 1 x 1 x 1, si la photo est une vignette vidéo, c’est un espace réservé 16 x 9, etc.

Spécifiquement à la question, utilisez un espace réservé 1×1 pour conserver le rapport carré de la div, avec une image d’ background-size utilisant la background-size d’ background-size pour conserver le format de l’image.

J’ai utilisé la background-position: center center; donc la photo sera centrée dans le div. (L’alignement de la photo au centre ou au bas de la verticale serait 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%; } 

Pour éviter une requête http supplémentaire, convertissez l’image fictive en une donnée: URL .

  

Essayez CSS:

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

vous pouvez utiliser la classe “img-fluid” pour les nouvelles versions, par exemple Bootstrap v4 .

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

Utilisation : –

tag img avec: –

class = “img-fluid”

src = “…”

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; faire en sorte que l’échelle IMG atteigne 100% tout en conservant le rapport d’aspect
  • position: relative; dans le récipient et la position: absolute; chez l’enfant avec top: 50%; et à left: 50%; centrer le coin supérieur gauche de l’img dans le conteneur
  • transform: translate(-50%, -50%); déplace l’img vers la gauche et le haut de moitié, 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%); }