Bonjour,
Ça me parait difficile de faire supporter la réduction de largeur uniquement par les images. Elles sont dès le départ trop petites pour ça.
Du coup, je ne réponds pas à la question mais voilà comment j'aurais fait : simplification html (vraiment, tous ces <div> qui servent à rien ...) + flex de ton code (très bien) + grid (en fenêtre étroite; bon exercice !
) ou float (en fenêtre large; rare cas où float semble tout à fait indiqué).
Les images ont leur taille d'origine limitée à la largeur de leur conteneur en fenêtre large (à adapter éventuellement), et limitée par la largeur de la colonne de la grille où elles se trouvent en fenêtre étroite.
Eventuellement, en fenêtre vraiment très étroite, lorsque le texte devient vraiment plus haut que les images, on peut revenir à la mise en page avec des floats (je ne l'ai pas fait dans mon exemple, et si ça se trouve ce ne sera jamais justifié : à voir en situation réelle).
EDIT : si parmi tes images d'origine, y en a de très grandes, tu peux ajouter un section img {max-width:9rem;} par exemple pour en limiter la taille.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blocks</title>
<style>
body,h3,p{margin:0;padding:0;}
body
{
background-color:red;
font-family:'Source Sans Pro',verdana, sans-serif;
line-height:1.625;
padding:2rem;
}
main
{
margin:0 auto;
max-width:1200px;
min-width:17rem;
padding:1rem;
background-color:white;
}
section
{
padding:1rem;
border:1px dotted #2B6CA3;
display:grid;
grid-template-rows:2rem auto;
grid-template-columns:10rem auto;
}
section:first-of-type
{
margin-bottom:1rem;
}
section h3
{
grid-row:1;
font-weight:800;
height:2rem;
}
section img
{
max-width:100%;
grid-row:1 / 3;
justify-self:center;
align-self:center;
}
main>img{display:none;}
@media only screen and (min-width:800px){
main{display:flex;justify-content:space-between;}
main>img
{
display:block;
flex:0;
padding:1rem;
width:8rem;
align-self:center;
}
section{display:block;flex:1;}
section:first-of-type{margin-bottom:0;}
section:first-of-type img {float:left;}
section:last-of-type img {float:right;}
}
@media only screen and (max-width:440px){
body{padding:2rem 0;}
}
</style>
</head>
<body>
<main>
<section>
<img src="https://www.menuiserie-menplast.fr/img/ideal-4000.jpg">
<h3>gauche</h3>
<p>Système de 2 - joints <br>
Système à 5 - chambres <br>
Profondeur de 70 mm <br>
Vitrage des plaques, largeur 41 mm</p>
</section>
<img src="https://www.menuiserie-menplast.fr/img/logo6.png">
<section>
<img src="https://www.menuiserie-menplast.fr/img/porte2.jpg">
<h3>droite</h3>
<p>La collection élégante de portes d’entrée aluminium Despiro est
une offre attrayante pour les clients les plus exigeants qui
recherchent la modernité.</p>
</section>
</main>
</body>
</html>
Amicalement,
Modifié par parsimonhi (01 Nov 2020 - 09:12)