28111 sujets

CSS et mise en forme, CSS3

[Résolu] Agencement d'images

Bonsoir,
Je tente sans réussite de reproduire l'agencement suivant uniquement en CSS :
2 photos à gauche séparées verticalement par une marge de 10px, 1 seule photo à droite.
Les 2 photos à gauche touchent le bord gauche, la photo de droite touche le bord droit. La hauteur des 2 photos de gauche + la marge doit toujours être la même que la hauteur de la photo de droite.
J'ai une solution en JS en calculant la hauteur la plus petite et en tronquant via le conteneur et overflow hidden, mais je suis presque persuadé que c'est possible en pur CSS. J'ai essayé avec flexbox mais je ne le maîtrise pas assez pour y arriver.
J'ai accès au HTML, au CSS, aux dimensions des photos, bref je peux tout modifier.
Si quelqu'un a une solution, je suis preneur et l'en remercie d'avance.
Image détaillée :
https://img15.hostingpics.net/pics/342755maquette.jpg
Modifié par Manhattan (29 Dec 2017 - 19:51)
Alors à l'arrache du vite fait.
Tu a deux façons de le faire, mais la première peut être retravaillé.


<!DOCTYPE html>
<html lang="fr">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Test</title>


<!-- LE CSS -->

<style type="text/css">
body {
	background-color: grey;
}

/* Possibilité 1 */

#conteneur
{
	background-color: white;
    display: flex;
    flex-direction: wrap;
    width: 100%;
    height: auto;
}

.helement1{

	background-color: green;
	padding: 10px 10px 10px 10px;
	width: 40vw;
	
}
.helement2{
    background-color: yellow;

	padding: 10px 10px 10px 10px;

	width: 40vw;
	
}
.helement3{
	background-color: blue;
	padding: 10px 10px 10px 10px;

    width: 50vw;
	

}
.cont{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.cont2{
	background-color: yellow;
	display: flex;
	

}
.img1{
	width: 100%;
}
.img2{
	width: 100%;
}
.img3{
	width: 100%;
}


/* Possibilité 2 la plus propre */


.conteneur2{
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
    margin-right: auto;
	width: 80vw;
	height: auto 0;
}

</style>

</head>


<body>


<div id="conteneur">
  <div class="cont">
    <div class="helement1"><img class="img1" src="assets/img/1.jpg" alt="image1"></div>

    <div class="helement2"><img class="img2" src="assets/img/2.jpg" alt="image2"></div>
  </div>
  <div class="cont2">
    <div class="helement3"><img class="img3" src="assets/img/3.jpg" alt="image3"></div>
  </div>
</div>

<div class="conteneur2">
	<img class="img1" src="assets/img/4.jpg" alt="image4">
</div>

</body>
</html>


Pour la seconde qui se trouve déjà dans le html voici l'image ses dimensions sont de 1923 x 1037.
http://hpics.li/50be859
Modifié par uniuc (30 Dec 2017 - 03:54)
Modérateur
Bonjour,

D'après ce que j'ai compris du besoin, le code ci-dessous a l'air de marcher pas trop mal avec chrome et firefox sur mac os. C'est un début.
<!DOCTYPE html>
<html>
<head>
	<title>Manhattan in december</title>
	<style>
	body
	{
		background: grey;
		margin:0;
		padding:0;
	}
	#container
	{
		width: 100%;
		margin: 0 auto;
	}
	#grid
	{
		display: grid;
		background: #fff;
	}
	#img1
	{
		margin-bottom: 10px;
		grid-column: 1;
		grid-row: 1;
		height: auto;
		width: 100%;
	}
	#img2
	{
		grid-column: 1;
		grid-row: 2;
		height: auto;
		width: 100%;
	}
	#img3
	{
		margin-left: 10px;
		grid-column: 2;
		grid-row: span 2;
		height: 100%;
		width: calc(100% - 10px);
	}
	</style>
</head>
<body>
<div id="container">
	<div id="grid">
		<img id="img1" src="https://img15.hostingpics.net/pics/532772hautGauche.jpg">
		<img id="img2" src="https://img15.hostingpics.net/pics/342086basGauche.jpg">
		<img id="img3" src="https://img15.hostingpics.net/pics/317239droite.jpg">
	</div>
</div>
</body>
</html>


EDIT: je viens de m'apercevoir que ça déforme quand même un peu les images !

Amicalement,
Modifié par parsimonhi (30 Dec 2017 - 13:47)
Bonjour parsimonhi,

Si le non support du grid layout se limitait à opera mini et Android browser, j'aurais volontiers pris ta solution puisqu'en responsive je place les photos les unes sous les autres, mais sous Edge, le résultat donne un léger décalé sur grand écran (2560x1440).
Modérateur
Manhattan a écrit :
Bonjour parsimonhi,

Si le non support du grid layout se limitait à opera mini et Android browser, j'aurais volontiers pris ta solution puisqu'en responsive je place les photos les unes sous les autres, mais sous Edge, le résultat donne un léger décalé sur grand écran (2560x1440).

Oui, en l'état, ce n'est pas utilisable !

Amicalemeent,
parsimonhi a écrit :

Oui, en l'état, ce n'est pas utilisable !

Amicalemeent,


Du tout ! Ce n'est pas utilisable par moi parce que je suis maniaque du détail, mais ce serait parfaitement utilisable par beaucoup.
Modérateur
Bonjour,

Arf, et c'est la cata avec safari !

Sinon, idéalement, il faudrait arriver à faire fonctionner le code ci-dessous. L'idée est d'imposer que l'image de droite fasse 100% de la hauteur de la hauteur disponible (somme des hauteurs des images de gauche + 10px) tandis que les images de gauche font 100% de la largeur disponible (largeur totale - largeur de l'image de droite - 10px). Mais les navigateurs n'y arrivent pas. Ils faudrait qu'ils fassent des itérations, et encore, ça ne suffit pas pour certains. Chrome y arrive plus ou moins si on redimensionne lentement la fenêtre, ou si on bidouille en lançant une animation sur le width de #img3 (ces deux méthodes effectuant une sorte d'itération). Je n'ai pas trouvé les éventuelles instructions complémentaires qui pourrait faire marcher la solution dès le premier affichage. Mais elles existent peut-être.


	body
	{
		background: grey;
		margin:0;
		padding:0;
	}
	#container
	{
		width: 100%;
		margin: 0 auto;
	}
	#grid
	{
		display: grid;
		background: #fff;
	}
	#img1
	{
		margin-bottom: 10px;
		grid-column: 1;
		grid-row: 1;
		height: auto;
		width: 100%;
	}
	#img2
	{
		grid-column: 1;
		grid-row: 2;
		height: auto;
		width: 100%;
	}
	#img3
	{
		margin-left: 10px;
		grid-column: 2;
		grid-row: span 2;
		width: auto;
		height: 100%;
	}

Amicalement,
Modifié par parsimonhi (30 Dec 2017 - 14:28)
Oui et c'est pour ça que je me suis retrouvé à le faire avec quelques lignes de jQuery qui au final font le job.
Modérateur
Bonjour,

Si tes images ont déjà (à peu près) les bonnes proportions (comme c'est le cas des images que tu donnes en exemple), et si tu acceptes que les images soient très légèrement déformées (de quelques pixels), la solution suivante semble fonctionner de manière assez robuste sous chrome, firefox et safari (à tester sous ie et edge car je ne les ai pas sous la main) :

EDIT: remplacement de #part1 {width: 50%;} et #part2 {width: 50%;} par #container > div {flex:1;}

<!DOCTYPE html>
<html>
<head>
	<title>Manhattan in december</title>
	<style>
	body
	{
		background: grey;
		margin: 0;
		padding: 0;
	}
	* {box-sizing: border-box;}
	#container
	{
		width: 100%;
		display: flex;
		background: #ff0;
	}
	#container > div
	{
		flex: 1;
	}
	#img1
	{
		
		border-bottom: 5px solid #fff;
		border-right: 5px solid #fff;
		display: block;
		width: 100%;
		height: 50%;
	}
	#img2
	{
		
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
		display: block;
		width: 100%;
		height: 50%;
	}
	#img3
	{
		border-left: 5px solid #fff;
		display: block;
		width: 100%;
		height: 100%;
	}	
	</style>
</head>
<body>
<div id="container">
	<div id="part1">
		<img id="img1" src="https://img15.hostingpics.net/pics/532772hautGauche.jpg">
		<img id="img2" src="https://img15.hostingpics.net/pics/342086basGauche.jpg">
	</div>
	<div id="part2">
		<img id="img3" src="https://img15.hostingpics.net/pics/317239droite.jpg">
	</div>
</div>
</body>
</html>

Amicalement,
Modifié par parsimonhi (30 Dec 2017 - 16:48)
Mais la solution 1 comme je te l'ai dit je la trouve bancale et a travailler.

La seconde solution à mon avis tu ne l'a pas comprise quand je vois le code pen c'est un mélange des deux codes qui en plus ne sont pas fait pour aller ensemble, mais si tu as la soluce c'est le principal.
Oui uniuc, j'ai compris que je n'avais pas compris ton explication Smiley lol
Pourrais-tu me faire un codepen à partir de celui que j'ai fait en remettant ton code dans le bon ordre ?
Merci d'avance

@Parsi, j'attends de voir si la solution 2 de uniuc fonctionne sans déformation Smiley cligne
Modérateur
Manhattan a écrit :
j'attends de voir si la solution 2 de uniuc fonctionne sans déformation Smiley cligne


La déformation est due au fait que tes marges sont en px et que quand la fenêtre ne peut pas contenir les images à leur taille réelle, les proportions de tes images ne peuvent pas être conservées sans faire de calculs complexes (d'où d'ailleurs une des raisons pour laquelle j'étais parti sur des grids précédemment). Mais il ne s'agit que de 1 ou 2 px sur une largeur de 1000 !

Amicalement,
Meilleure solution
Excuse-moi Parsimonhi je n'avais pas bien regardé : ça semble bien marcher en effet et je ne vois même pas la déformation. Edge passe, seul ie11 n'aime pas, soit 2,4 % de la population...
Merci pour ton travail, je vais probablement l'utiliser avec une solution JS de repli en cas de ie11.
:)
Et oui, les images sont découpées pour fonctionner justement (WordPress > tailles générées automatiquement).
Modifié par Manhattan (30 Dec 2017 - 17:10)
Modérateur
Bonjour,

La déformation est impossible à voir à l'oeil nu. Il faut un calcul pour s'apercevoir s'il y a une déformation ou pas.

Concernant ie11 , c'est quoi le symptôme ? y a peut-être moyen de corriger ça dans le css (par exemple en mettant #container > div {flex: 1 1 auto;} au lieu de #container > div {flex: 1;}).

Amicalement,
Sujet clos
Aller à