IP Girl
  1. IP Girl
  3. Pourquoi flexbox étire-t-il mon image?
Intereting Posts
Streaming log (txt) viewer L’appel jQuery .load () n’exécute pas JavaScript dans le fichier HTML chargé Comment charger des CSS en utilisant jquery Rails 3 sauter les validations et rappels Envoi d’une requête GET avec les en-têtes d’authentification à l’aide de restTemplate Sérialisation Java – java.io.InvalidClassException classe locale incompatible MSTest a-t-il un équivalent à TestCase de NUnit? sh: react-scripts: commande introuvable après l’exécution de npm start Pourquoi jQuery n’utilise-t-il pas requestAnimationFrame? “Symbol” n’est pas défini dans IE après l’utilisation de babel System.Timers.Timer vs System.Threading.Timer Un toast Android peut-il être plus long que Toast.LENGTH_LONG? Existe-t-il une méthode intégrée pour comparer les collections? Quel langage de programmation est utilisé pour développer Java? Utilisation de Server.MapPath dans des classes C # externes dans ASP.NET

Pourquoi flexbox étire-t-il mon image?

Flexbox a ce comportement où il étend les images à leur hauteur naturelle. Dans d’autres mots (plus spécifiques), si j’ai un conteneur Flexbox avec une image enfant et que je redimensionne la largeur de cette image, la hauteur ne redimensionne pas du tout et l’image est étirée. 

  
Appify
 
 some text

Et cette feuille de style 

 div { display: flex; flex-wrap: wrap; } img{ width: 50% }

J’ai ajouté ce codepen pour démontrer ce que je veux dire. Qu’est-ce qui cause cela?

Il s’étire parce que la valeur d’ align-self par défaut est stretch . Définissez align-self au center . 

 align-self: center

Voir doc ici: align-self

La clé est align-self: center : 

 .container { display: flex; flex-direction: column; } img { max-width: 100%; } img.align-self { align-self: center; } 
 
 
Without align-self:
  
With align-self:

J’ai fait face au même problème avec un menu Foundation. align-self: center; n’a pas fonctionné pour moi.

Ma solution consistait à envelopper l’image avec un

...

Ajout de margin pour aligner les images:

Comme nous voulions que l’ image soit left-aligned à left-aligned , nous avons ajouté: 

 img { margin-right: auto; }

De même, pour que l’ image soit right-aligned à right-aligned , nous pouvons append margin-right: auto; . L’extrait de code montre une démonstration pour les deux types d’alignement.

Bonne chance… 

 div { display:flex; flex-direction:column; border: 2px black solid; } h1 { text-align: center; } hr { border: 1px black solid; width: 100% } img.one { margin-right: auto; } img.two { margin-left: auto; } 
 
 
Flex Box