0
votes

Image dans Flexbox, 100% de hauteur est trop grande

Je me rends compte qu'il existe d'autres questions similaires et je m'excuse si cela a été répondu, mais je n'ai pas pu discerner une solution à ma question.

https://codepen.io/benrhere/pen/grolqpk p>

<div>
  <h4>Headline inside of flexy</h4>
  <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
</div>

html css flexbox

1 commentaires

Il est presque toujours préférable d'envelopper les images Flexbox dans leur propre div.

3 Réponses :

1
votes

Vous avez utilisé une hauteur fixe mais votre image contient est plus grande que cela. Vous pouvez utiliser les deux solutions.

div {
      min-height: 300px; /* or height:100%; */
      background-color: green;
      display: flex; 
      border-style: dotted;
      flex-direction:column;
}

2 commentaires

Merci! Travaillé comme un charme. C'est contre-intuitif pour moi qu'en fixant une hauteur minimale, la hauteur résultante pourrait réellement être plus petite, mais cela semble être le cas. Je vais lire à travers cet autre poste pour essayer de mieux comprendre cela.

Vous accueillez mate.

1
votes

L'image est plus longue que son parent (élément div). Vous pouvez soit définir un max-hauteur code> pour le img (comme dans l'extraite) ou ajouter hauteur: content de la teneur en forme; code> au style DIV.

p >



<div>
      <h4>Headline inside of flexy</h4>
      <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
    </div>

2 commentaires

Cette solution n'a pas semblé fonctionner pour moi. Réglage de la hauteur minimale, au lieu de max-hauteur, a-t-il fait.

Merci de la réponse, cependant.

1
votes

Modifier, voir la duplicache pour explications forte>

Vous pouvez également définir un min-hauteur code> (ou Overflow: caché code>) sur le IMG, donc le navigateur recalcule la taille maximale, il peut être de rester à l'intérieur de son parent flex. p>

p>



<div>
  <h4>Headline inside of flexy</h4>
  <img src="https://loremflickr.com/400/300" alt="image placeholder for a thumb that's supposed to present a featured work" class="work-thumb">
</div>

2 commentaires

Merci! C'est utile. Comme je l'ai écrit sur l'autre réponse, il est contre-disant pour moi qu'en fixant une hauteur minimale, la hauteur résultante pourrait réellement être plus petite, mais cela semble être le cas. J'apprécie la réponse.

@Benjifb Si le IMG n'est pas assez grand, ajoutez flex-gourmand: 1; aux règles de «mg», il l'étendra au fond si elle est plus courte.


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        
                        
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        
                        
                                            
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor