IP Girl
  1. IP Girl
  3. Comment puis-je remplir une div avec une image tout en la maintenant proportionnelle?
Intereting Posts
Comment déterminer la consommation de CPU et de mémoire à l’intérieur d’un processus? Comment une unité doit-elle tester un contrôleur .NET MVC? Chaîne de connexion utilisant l’authentification Windows Comment atsortingbuer une valeur booléenne au modèle Filtrer les résultats 6 à 10 sur 100 avec ng-repeat dans AngularJS Délais d’expiration de l’entité React, ES6 – getInitialState a été défini sur une classe JavaScript simple Comment créer une clé primaire en tant qu’auto-incrémentation pour Room Persistence lib CMake: Structure du projet avec tests unitaires L’atsortingbut obsolète fait en sorte que la propriété soit ignorée par XmlSerialization Une valeur flottante proche de zéro peut-elle provoquer une erreur de division par zéro? Sidekiq ne traite pas la queue But d’un “.f” annexé à un numéro? Allumer Enum en Java Que signifient les différentes colonnes (de lettres) pour la sortie de fusion svn?

Comment puis-je remplir une div avec une image tout en la maintenant proportionnelle?

J’ai trouvé ce fil – Comment étirer une image pour remplir un

tout en conservant le rapport d’aspect de l’image? – ce n’est pas tout à fait ce que je veux.

J’ai une div avec une certaine taille et une image à l’intérieur. Je veux toujours remplir le div avec l’image, peu importe si l’image est paysage ou portrait. Et peu importe que l’image soit coupée (le div lui-même a un débordement caché).

Donc, si l’image est en portrait, je veux que la width soit de 100% et la height:auto pour qu’elle rest proportionnée. Si l’image est en paysage, je veux que la height soit de 100% et que la width to be automatique. Ça a l’air compliqué non? 

 
 Could be portrait or landscape

Comme je ne sais pas comment faire, j’ai simplement créé une image rapide de ce que je veux dire. Je ne peux même pas le décrire correctement.

entrer la description de l'image ici

Donc, je suppose que je ne suis pas le premier à le demander. Cependant, je ne pouvais pas vraiment trouver de solution à cela. Peut-être y a-t-il une nouvelle façon de faire CSS3 – je pense à la flex-box. Une idée? Peut-être que c’est encore plus facile que ce à quoi je m’attends?

Si je comprends bien ce que vous voulez, vous pouvez laisser les atsortingbuts de largeur et de hauteur hors de l’image pour conserver les proportions et utiliser Flexbox pour effectuer le centrage. 

 .fill { display: flex; justify-content: center; align-items: center; overflow: hidden } .fill img { flex-shrink: 0; min-width: 100%; min-height: 100% }

C’est un peu tard mais j’ai juste eu le même problème et finalement résolu avec l’aide d’un autre post stackoverflow ( https://stackoverflow.com/a/29103071 ). 

 .img { object-fit: cover; width: 50px; height: 100px; }

J’espère que cela aide encore quelqu’un.

Ps: fonctionne également avec les propriétés css max-height , max-width , min-width et min-height . Il est particulièrement utile d’utiliser des unités de longueur telles que 100% ou 100vh / 100vw pour remplir le conteneur ou la fenêtre entière du navigateur.

Une vieille question mais qui mérite une mise à jour car il y a maintenant un moyen.

La bonne réponse basée sur CSS consiste à utiliser object-fit: cover , qui fonctionne comme background-size: cover . Le positionnement serait pris en charge par l’atsortingbut de object-position d’ object-position , qui serait centré par défaut.

Mais il n’y a aucun support pour cela dans les navigateurs IE / Edge ou Android <4.4.4. En outre, la object-position n’est pas prise en charge par Safari, iOS ou OSX. Les polyfills existent, les images d’object-ajustement semblent donner le meilleur support.

Pour plus de détails sur le fonctionnement de la propriété, voir l’ article sur les astuces CSS sur l’ object-fit pour une explication et une démonstration.

Cela devrait le faire: 

 img { min-width: 100%; min-height: 100%; width: auto; height: auto; }

Envisagez d’utiliser la background-size: cover (IE9 +) conjointement avec background-image . Pour IE8-, il y a un polyfill .

Vous pouvez utiliser div pour y parvenir. sans balise img 🙂 j’espère que cela vous aidera. 

 .img{ width:100px; height:100px; background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg'); background-repeat:no-repeat; background-position:center center; border:1px solid red; background-size:cover; } .img1{ width:100px; height:100px; background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg'); background-repeat:no-repeat; background-position:center center; border:1px solid red; background-size:cover; }

Ici vous avez mon exemple de travail. J’ai utilisé une astuce qui définit l’image comme arrière-plan du conteneur div avec la taille d’arrière-plan: couverture et position d’arrière-plan: centre

J’ai placé l’image avec la largeur: 100% et l’opacité: 0 le rendant invisible. Notez que je montre mon image uniquement parce que j’ai un intérêt particulier à appeler l’événement click enfant.

S’il vous plaît noter que j’ai toujours utilisé angular, il est complètement hors de propos. 

 
 
		      	
  Essaye ça: 


 img { position: relative; left: 50%; min-width: 100%; min-height: 100%; transform: translateX(-50%); } 


  J’espère que cela t’aides 






		      	
  La forme d’ object-fit: cover CSS object-fit: cover et object-position: left center les valeurs de propriété du object-position: left center corrigent maintenant ce problème. 






		      	
  La seule façon de réaliser le scénario “best case” décrit était de placer l’image en arrière-plan: 


 
​ 


 .container { width: 150px; height: 100px; background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }​ 






		      	
  Toutes les réponses ci-dessous ont une largeur et une hauteur fixes, ce qui rend la solution “non réactive”. 


  Pour obtenir le résultat, mais en respectant l’image, j’ai utilisé les éléments suivants: 


    

  1.   Dans le conteneur, placez une image gif transparente avec la proportion souhaitée 
    2. 

  2.   Donner une image tag en arrière-plan css avec l’image que vous souhaitez redimensionner et recadrer 
    3. 



  HTML: 


 
  
 .container img{ width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center; }​ 






		      	
  Non, il n’y a pas de solution CSS3 uniquement à cela.  La meilleure réponse à la question que vous avez liée est la deuxième meilleure chose, cependant.