est-il possible de contenir / limiter la hauteur d'une image dans une colonne Flexbox? Dans ce violon, j'aimerais que l'image soit affichée dans une taille réduite afin de rendre le titre en dessous de ce qu'il soit juste à l'intérieur du bas du parent flex.
Idéalement, je voudrais faire cela avec un 100% Solution CSS.
Voici le violon: https://jsfiddle.net/ brandoncc / czljoxdu / 4 /
Le code CSS de base est le suivant:
3 Réponses :
Il suffit d'ajouter une nouvelle classe changer le pourcentage comme vous le souhaitez.
Essayez ceci ..
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
Vous pouvez ajouter ce qui suit pour garder l'image de déborder et utiliser l'espace maximal. Vous pouvez modifier le pourcentage en plus petit de l'image. Il suffit de la modifier un voir ce qui fonctionne le mieux pour vous.
img {
height: 100%;
}
Min-hauteur: 0; à l'image
Cela fonctionne réellement (je ne suis pas sûr de savoir pourquoi), mais cela perd le point de vue de l'image.
Vous pouvez ajouter des objets: contenir; à l'image