Grille images + description

Bonjour à tous,

Je m'en remets à vos compétences, car j'aimerais arriver à un certain résultat sur mon site, et je n'arrive pas exactement à faire ce que je voudrais. Je vous explique, j'espère qu'une bonne âme saura m'aider

Sur un site e-commerce, je voudrais présenter mes produits comme ceci :

+------------------------------------+--------------------+----------+----------+
|                                    |                    |          |          |
| TITRE PRODUIT                      |                    |   IMG 2  |   IMG 4  |
|                                    |                    |          |          |
| Description produit                |  IMAGE PRINCIPALE  +----------+----------+
|                                    |                    |          |          |
|                                    |                    |   IMG 3  |   IMG 5  |
|                                    |                    |          |          |
+------------------------------------+--------------------+----------+----------+

En gros, j'utilise cette structure de base :

<div class="product-block">
    <div class="product-description">...</div>
    <img class="main_image" />
    <div class="thumbnails">
        <div class="thumbnails-column">
            <img src="img_2" />
            <img src="img_3" />
        </div>
        <div class="thumbnails-column">
            <img src="img_4" />
            <img src="img_5" />
        </div>
    </div>
</div>

Stylé comme ceci (des blocs "flex" imbriqués en fait) :

div.product-block
{
    display: flex;
    flex-direction: row;
}
div.product-description
{
    width: 50%;
}
img.main_image
{
    width: 25%;
}
div.thumbnails
{
    width: 25%;
    display: flex;
    flex-direction: row;
}
div.thumbnails-column
{
    display: flex;
    flex-direction: column;
}

Je suis arrivé à le faire +/- comme je veux, en fixant manuellement les tailles des images, et en laissant le bloc description de taille variable.
Le seul souci, c'est que quand je diminue la largeur du viewport, les images deviennent trop grandes par rapport à la description, et dans le cas où le titre est un peu long, les images s'écrasent un peu.
J'ai revu la mise en page pour les plus petites résolutions, mais sur des résolutions intermédiaires comme sur des tablettes (~800px), ca ne rend pas très bien

J'aimerais éviter ca, et que cela réagisse comme suit :
- La hauteur de tout le bloc serait déterminé par le plus grand élément : soit la description produit (si beaucoup de texte), soit le bloc images
- Le bloc description devrait faire minimum 50% de la largeur totale

Pouvez-vous m'aider ? Et est-ce possible, déjà, de réaliser cette configuration en CSS pur (pas de Javascript) ?

Merci beaucoup,
Bien à vous,

Arnaud Dohogne

Je ne suis pas certains de comprendre correctement ton problème.

ne manquerait-il pas simplement des propriétés pour limiter la taille de tes images ?

img.main_image {
    width: 25%;
}

.thumbnails img {
  width: 100%;
  max-height: 100%;
}

Modifié par taspeur (16 Dec 2017 - 09:48)

Bonjour,

Déjà, j'aurais encapsulé l'image principale dans un div. Par exemple :

<div class="product-block">
    <div class="product-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
	<div class="main_thumbnails">
		<img class="main_image" src="img1.jpg" />
	</div>
	<div class="thumbnails">
		<div class="thumbnails-column">
    		<img src="img2.jpg" />
    		<img src="img2.jpg" />
        </div>
        <div class="thumbnails-column">
    		<img src="img2.jpg" />
    		<img src="img2.jpg" />
        </div>
	</div>
</div>

Ensuite, pour le css (et si tant est qu'on souhaite vraiment utiliser du flex, ce dont je ne suis pas convaincu ici), j'aurais utilisé la propriété flex pour donner une largeur appropriée aux colonnes. Par exemple :

div.product-block
{
    display: flex;
    flex-direction: row;
}
div.product-description
{
    flex: 2;
}
div.main_thumbnails
{
    flex: 1;
}
div.thumbnails
{
    flex: 1;
    display: flex;
    flex-direction: row;
}
div.thumbnails-column
{
    flex: 1;
}
img {display:block;width:100%;}

Edit : div.thumbnails-column {display: flex;flex-direction: column;} n'est pas nécessaire.

Amicalement,
Modifié par parsimonhi (16 Dec 2017 - 11:15)

Bonjour,

Voici une variante où on limite la taille maximale des images en cas de grands viewports, et qui s'adapte à la largeur disponible en cas de petits viewports (j'ai mis un seuil à 500px mais ça peut être toute autre valeur, la seule condition à respecter étant de donner à div.main_thumbnails et div.thumbnails un max-width égal à la moitié de ce seuil).

div.product-block
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #eee;
}
div.product-description
{
    flex: 2;
}
div.main_thumbnails
{
    flex: 1;
    max-width:250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.thumbnails
{
	flex: 1;
    display: flex;
    flex-direction: row;
    max-width:250px;
}
div.thumbnails-column
{
	flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img {display:block;width:100%;}

div.product-block
{
    flex-wrap: wrap;
}
@media (max-width:500px)
{
	div.product-description {min-width:100%;}
	div.main_thumbnails {min-width:50%;}
	div.thumbnails {min-width:25%;}
}

Amicalement,
Modifié par parsimonhi (16 Dec 2017 - 12:21)

Je ne m'y connais pas en flex, par contre j'ai une remarque sur la présentation.
La lecture naturelle se fait de gauche à droite.
La lecture d'un texte court est prioritaire sur le décryptage d'une image.

Habituellement, on place l'image à gauche pour une compréhension rapide du produit par l'image (qui peut être "accrocheuse")
Sinon, le lecteur va lire la description avant de s'intéresser à l'image.
Les vignettes tout à gauche ne retiendront pas le regard.

Voili, voilou