J'essaie d'ajuster les dimensions de l'image après l'avoir téléversée. Supposons que mon image téléchargée a à l'origine des dimensions 450x700 et que son conteneur parent a des dimensions 400x400. Dans mon cas, j'utilise object-fit pour adapter l'image à son conteneur parent en préservant les proportions et cela ressemble à
Mais j'ai besoin d'afficher l'image complètement et object-fit n'est pas la bonne option dans ce cas. La suppression de object-fit et l'ajout de la largeur et de la hauteur avec 100% le rend entièrement visible, tout en diminuant la qualité. Ici, ça ressemble à
Dans la dernière image, l'image originale est celle-ci
En fait, je peux le résoudre avec Vous pouvez remarquer le fond blanc de l'image, qui ne vient pas bien avec la couleur de fond du conteneur (qui est gris clair). Y a-t-il une possibilité de le résoudre? object-fit: contain , mais ce n'est pas à 100% pour moi ou peut-être qu'il n'y a pas d'autre moyen. Avec contenir, j'obtiens ça 
5 Réponses :
Quand vous dites que object-fit ne fonctionne pas, est-ce parce qu'il recadre l'image? Et avez-vous essayé de changer object-fit: cover en object-fit: contain ?
Une autre option est d'avoir l'image comme image d'arrière-plan et de définir la taille de l'arrière-plan à contient également. Cela redimensionnera l'image pour qu'elle tienne dans les limites en conséquence. par exemple
.image__wrapper {
background: url(../your-img.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Malheureusement, l'étirement de l'image pour l'adapter sera toujours déformé et donc dégrader l'image.
Si l'arrière-plan de l'image est toujours blanc, vous pouvez simplement définir une couleur d'arrière-plan pour le wrapper parent (par exemple background-color: white )
vous pouvez utiliser la propriété css ..
background: url('images_here')no-repeat center center
background-size: cover (or) contain
width:400px;
height: 400px;
Si vous voulez que l'image complète soit visible, vous devez utiliser object-fit: contain , voir https://www.w3schools.com/css/css3_object-fit.asp .
<html>
<head>
<style>
.contain {object-fit: contain;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>object-fit: contain:</h2>
<img class="contain" src="SOMEFILENAME.jpg" alt="Paris" style="width:200px"> <!--Put the restricting size value here-->
</body>
</html>
Utilisez des images avec des canaux alpha (comme png) ou utilisez des svgs. Une autre façon consiste à définir l'arrière-plan des parents sur blanc également.
image-parent suppose qu'il s'agit de votre classe de conteneur parent.Vous pouvez donc ajouter des css comme ceci
.image-parent img{ height:400px; width:auto; display:block; margin:0 auto; }
Si sa balise d'image, vous pouvez définir object-fit: contain avec la hauteur et la largeur et si son image d'arrière-plan, vous pouvez définir background-size: contain
Cela n'est possible que si vous modifiez les images avant de les télécharger, sinon vous devez scarifier une chose, soit l'image complète avec l'image coupée, soit une image avec un arrière-plan. L'autre astuce consiste à utiliser une classe de couleur pour remplir l'arrière-plan avec l'arrière-plan de l'image, mais cela n'est pas possible pour vous lorsque des images inconnues sont téléchargées @NorayrGhukasyan
Le plaisir est tout à moi @NorayrGhukasyan mais je vous suggère de visiter les ans de KEVIN dans ce lien peut-être vous aider stackoverflow.com/questions/3029422/...
si vous utilisez la balise img, vous pouvez essayer d'utiliser les trois propriétés height: 100%; largeur: 100% et ajustement de l'objet: couverture