hello tous les con-finés!

Voici mon souci, je développe un site pour un artiste peintre, donc forcément une page affiche toutes ses oeuvres, et j'ai un souci dans l'agencement des images !

voilà ce que je veux : 

mais voilà ce que j'obtiens :

Etant une grosse bille en CSS, je n'arrive pas à faire que les images prennent toute la place. j'imagine que je dois faire en sorte que le container se redimensionne aux proportions de l'image, mais je n'arrive pas à trouver la marche à suivre.

Une bonne âme pour me mettre sur la voie? merci et bonne soirée!

petit up? 

J'ai continué mes recherches, j'ai vu une méthode qui consistait à modifier l'entité image (symfony) pour y intégrer les dimensions, récupérées par un GetImageSize(), et dans mon template twig je dimensionne le container de manière dynamique. Mais ça me parait un peu compliqué, il n'y a pas plus simple? Bonne soirée à tous. 

bonjour tu et censé pouvoir le faire uniquement avec HTML5 + CSS3

pour agencé des éléments facilement avec des techno récentes je pourrait te conseillé d'allé voir le model de boite flex .

il y à un chapitre sur flex disponible sur openclassroms .

pour adapté la taille d'une image à celle d'une boite parent ( où celle de l'écran ) , sans dégradé l'image ( l'étendre ou l'inverse ) , tu peut en CSS

lui donné une dimmension relative sur un seule de ces 2 axes et mettre l'autre axe en valeur auto pour qu'il s'adapte à son axe opposé avec des propriété max-width , max-height pour qu'il ne dépasse jamais ça dimmension réél même si il y à assez de place sur l'écran sinon cela va étendre l'image ( la dégradé ) , et sont inverse min-width , min-height, pour que l'image reste visible même si la taille de l'ecran ( où de la boite parent ) diminue beaucoups .

-
Edité par SamuelGaborieau3 1 avril 2020 à 22:45:01

On voit que les images ont toutes la même largeur et que leur hauteur est variable. Je pencherais aussi pour un flex, mais avec une direction en colonnes

#container {
   display:flex;flex-flow:wrap;  
   flex-direction:column; 
   height:500px; 
   align-content:flex-start;
}
 

J'ai simulé les images avec des div de taille fixe. Voici mon HTML :

<div id="container">
   <div style="width:200px; height:120px; background:red;"></div>
   <div style="width:200px; height:150px; background:blue;"></div>
   <div style="width:200px; height:80px; background:yellow;"></div>
   <div style="width:200px; height:200px; background:pink;"></div>
   <div style="width:200px; height:220px; background:black;"></div>
</div>

Reste que certaines de tes images sont coupées. Il faudra sans-doute utiliser clip-path.

-
Edité par AlainPré 2 avril 2020 à 11:55:14

Merci à tous les 2! La difficulté c'est que je génère les images via une boucle for, les images sont stockées dans un dossier et je récupère leur chemin via un Select All. 

Donc je peux pas modifier une à une les hauteurs. C'est pour ça que je pensais récupérer les tailles via getimagesize.

 <div class="row" style="width: 90% ;border: solid 5px white; margin: auto; border-radius: 40px; background-color: dimgray;">
        <div id="container" style="display: flex; flex-direction: column; height: 95%; flex-flow: wrap; align-content: flex-start">

            {% for artwork in artworks %}
                {% if artwork.filename %}
                        <div class="card mt-4">
                            <a class="miniature" href="#">
                                <img class="card-img-top" src="{{ vich_uploader_asset(artwork, 'imageFile') }}"
                                     alt="card-img-top"  style="width: 100%; height: auto">
                            </a>
                        </div>

                {% endif %}

            {%  endfor %}
        </div>

    </div>

Ca ne donne toujours pas ce que je souahaite... Le pire c'est que je sens que je suis pas très loin, mais ça fait quelques temps que je bloque dessus, je crois que je suis victime d'un bel effet tunnel!  Je vais laisser reposer le cerveau pour la soirée. merci pour vos conseils et bonne soirée! ;) 

-
Edité par VinSls 2 avril 2020 à 20:21:11