Partage

Tableau d'images s'adaptant à la taille d'écran

Sujet résolu

25 mai 2017 à 17:14:44

Bonjour,

je travaille sur un site web, et doit redessiner une page. Voici la page que je souhaiterais avoir:

Pour cela, j'ai créé un tableau

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			
			.image {
			object-fit: cover;
			height: 682px;
			width: 384px;
			}
			
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<img src="resources/images/image1.jpg" class="image"/>
				</td>
				<td>
					<img src="resources/images/image3.jpg"class="image"/>
				</td>
			</tr>
			<tr>
				<td>
					<img src="resources/images/image3.jpg" class="image"/>
				</td>
				
				<td>
					<img src="resources/images/image4.jpg" class="image"/>
				</td>
			</tr>
		</table>
	</body>
</html>

Le premier problème est qu'il y a toujours une marge blanche autour des images, comme une sorte de cadre. Le deuxième et principal problème est que ce tableau ne s'adapte pas du tout à la taille des écrans, en particulier les tablettes/téléphones en mode portrait. Je cherche le moyen de tronquer les images au centre de sorte à ce que chaque image occupe une demi-longueur et une demi-largeur de l'écran, quelles que soient ses dimensions.

En vous remerciant pour vos solutions

-
Edité par Sylver94 25 mai 2017 à 17:15:37

Lucky13

25 mai 2017 à 17:28:36

Hello,

Pourtant utiliser <table> pour mettre en page tes images ? c'est réservé aux donnée tabulaires. Un inline-block, une liste à puces ou mieux le modèle flexbox serait la meilleurs solution (et plus simple)

Est-ce du à une contrainte ou juste une limite de compétence ? (ne le prend pas mal hein )

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Sylver94

27 mai 2017 à 20:19:10

Hello Lucky13,

merci pour ta réponse. Effectivement, je n'ai pas beaucoup étudié le CSS, je suis donc novice dans le domaine. Après recherche d'informations à propos du modèle flexbox, il paraît en effet plus judicieux que l'utilisation de <table>.

Cependant, cela ne règle ni les problèmes de marges blanches, ni les problèmes de redimensionnement.

Voilà mon code pour le moment:

<html>
    <head>
		<title>Mon titre</title>
		<meta charset="utf-8"/>
		<style>
			
			#image {
			position: absolute;
			align-top: 0x;
			display: flex;
			flex-wrap: wrap;
			}
			
		</style>
	</head>
	<body>
		<div class="image">
			<img src="resources/images/image1.jpg"/>
			<img src="resources/images/image2.jpg"/>
			<img src="resources/images/image3.jpg"/>
			<img src="resources/images/image4.jpg"/>
		</div>
	</body>
</html>

-
Edité par Sylver94 27 mai 2017 à 20:25:37

Lucky13

27 mai 2017 à 21:19:43

Comme ceci ? -> https://jsfiddle.net/d8doaupk/

Autres solutions -> https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

ps: #image pour une classe css ? tu t'es mélangé les pinceaux

-
Edité par Lucky13 27 mai 2017 à 21:20:28

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Sylver94

28 mai 2017 à 12:09:23

Merci pour les liens, j'ai réussi à enlever les marges blanches et à positionner les images selon la taille d'écran. Ce qu'il me reste à faire est de tronquer les images afin qu'elles s'adaptent aux dimensions de l'écran. Voilà ce que j'ai actuellement sur une tablette en mode portrait:

Voici le code corresopndant:

<html>
    <head>
		<title>Mon titre</title>
		<meta charset="utf-8"/>
		<style>
			
			.left {
			position: absolute;
			max-width: 50%;
			top: 0px;
			left: 0px;
			display: flex;
			flex-wrap: wrap;
			font-size: 0;
			}
			
			.right {
			position: absolute;
			max-height: 50%;
			top: 0px;
			left: 50%;
			display: flex;
			flex-wrap: wrap;
			font-size: 0;
			}
			
		</style>
	</head>
	<body>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<div class="left">
			<img src="resources/images/image1.jpg"/>
			<img src="resources/images/image2.jpg"/>
		</div>
		<div class="right">
			<img src="resources/images/image3.jpg"/>
			<img src="resources/images/image4.jpg"/>
		</div>
		</meta>
	</body>
</html>

J'ai essayé en mettant "height: 50%" ou "max-height: 50%", ca ne change rien

-
Edité par Sylver94 28 mai 2017 à 13:23:12

Lamecarlate

28 mai 2017 à 13:53:50

Bonjour,

pourquoi utiliser position: absolute ? Lucky13 t'a donné des pistes propres et bien documentées, pourquoi ne pas les suivre ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Sylver94

28 mai 2017 à 16:11:02

Bonjour Lamecarlate,

d'abord, le

position: absolute;

me permet de supprimer les marges blanches que j'avais autour des images, et de placer les images aux 4 coins. Pour illustrer, voici le résultat du code précédent après avoir supprimé les deux

position: absolute;

PS: la modification du zoom n'est pas la cause de l'affichage, le zoom par défaut donne le même résultat

Ensuite, j'ai étudié la documentation fournie par Lucky13 avec attention, et je l'ai suivie. Mais évidemment, il fallait que je l'adapte à ce que je recherche, et le

position: absolute;

est la seule solution que j'ai trouvée afin de positionner correctement les images. Je pense ne pas être loin de la solution, le principal problème pour moi reste de tronquer les images selon la taille de l'écran.

-
Edité par Sylver94 28 mai 2017 à 16:22:36

Lamecarlate

28 mai 2017 à 17:02:30

Dans ce cas, pars plutôt sur ça : https://jsfiddle.net/0q2bvf2e/ J'ai repris le code de Lucky13 et forcé les blocs à faire 50% de large et 50% de haut ("vh" est une unité particulière, qui signifie "viewport height", 100vh = la hauteur totale du viewport). Est-ce que ça ressemble à ce que tu cherches à faire ?

Pourquoi je te suggère ça ? Parce que position: absolute, s'il paraît simple, est en fait très complexe, et peut avoir des conséquences agaçantes. Dans ton cas, as-tu essayé d'ajouter un autre élément à ta page ? Si oui, tu as dû remarqué qu'il se plaçait tout en haut, car les deux éléments en absolu sont comme éthérés, ils n'interviennent plus dans le flux de la page et n'ont plus aucune influence sur les autres éléments.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Sylver94

28 mai 2017 à 19:13:08

Merci pour ta réponse, j'ai testé ta solution, mais ça ne marche pas. Les images sont à nouveau toutes alignées sur la gauche sur mon PC. Sur tablette, les images sont aux 4 coins mais il y a une bande blanche en dessous de chacune.

Est-il si gênant d'utiliser "position: absolute;" ? Je ne l'applique qu'à mes 4 images. De plus, j'imaginais plutôt tronquer les images au centre (c'est à dire rogner autant en haut qu'en bas, ou à gauche qu'à droite de l'image), et j'ai découvert la propriété "clip: rect" qui me semble adaptée. Or, elle ne s'utilise qu'avec "position: absolute;".

Lamecarlate

28 mai 2017 à 20:06:03

Est-ce que tu peux nous donner ton code actuel (avec ma proposition, donc) ?

Et non, tu n'appliques pas position: absolute à tes images, mais à leur conteneur - et donc clip ne pourrait pas fonctionner avec.

Je réfléchis à ton besoin de troncature d'images.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Sylver94

28 mai 2017 à 20:46:12

Voici le code de ta propsition:

<html>
	<head>
        <title>Mon titre</title>
        <meta charset="utf-8"/>
        <style>
			
			body {
			margin: 0;
			}
			
			.images {
			display: flex;
			flex-wrap: wrap;
			font-size: 0;
			height: 100vh;
			}
			
			.image {
			width: 50vw;
			height: 50vh;
			overflow: hidden;
			}
			
		</style>
	</head>
    <body>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<div class="images">
            <div class="image">
				<img src="resources/images/image1.jpg"/>
			</div>
            <div class="image">
				<img src="resources/images/image2.jpg"/>
			</div>
            <div class="image"> 
				<img src="resources/images/image3.jpg"/>
			</div>
            <div class="image">
				<img src="resources/images/image4.jpg"/>
			</div>
		</div>
		</meta>
	</body>
</html>

Voici le résultat sur PC:

Et sur tablette* -> le résultat espéré étant celui-ci ->

*Il y a également une marge en dessous des deux images du bas, mais elles dépassent la taille de l'écran

Merci pour ton aide

-
Edité par Sylver94 28 mai 2017 à 21:21:31

Lamecarlate

28 mai 2017 à 22:27:03

Tu n'as pas tout pris, j'avais également fait quelque chose pour les images elles-mêmes

(et la meta viewport doit être dans le head, pas le body)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Sylver94

30 mai 2017 à 15:38:43

J'ai compris le problème des marges blanches sous les images en version portrait. En fait les images étaient trop petites (683*384). Du coup je les agrandies 5 fois (ça devrait aller, je pense ).

J'ai également déplacé le view dans le head, du coup la version portrait est parfaite (à part la troncature), mais la version PC donne toujours le même résultat que dans mon message précédent...

-
Edité par Sylver94 30 mai 2017 à 15:59:21

Sylver94

3 juin 2017 à 11:31:43

Rebonjour,

je me permets de reprendre le topic car j'ai un nouveau "défi" à relever .

Après avoir positionné les 4 images correctement, je souhaiterais afficher pour chaque image un texte différent pour chacune d'elles au survol de la souris.

Le problème auquel je suis confrontée aujourd'hui est, du fait que la longueur du texte varie selon les images, je n'arrive pas à centrer parfaitement mon texte. J'ai décidé d'avoir une longueur unique (40vw) et d'adapter la largeur selon les besoins.

J'ai entendu parler de la fonction "offsetWidth" et ai tenté de l'utiliser, mais sans succès. Voici mon code:

.text {
	width: 40vw;
	height: auto;
        font-family: Gabriola;
        opacity: 0.6;
        background-color: black;
        color: white;
        font-size: 1.5vmax;
        padding: 1vw 1vw;
}

...
<script>
   var text_width = document.getElementById(text).offsetWidth*0.5;
</script>
<div class="text" style="top: 25vh-text_width; left: 4vw;"> // Texte de l'image1
Ma description pour l'image 1
</div>

En vous remerciant pour votre aide :euh:

-
Edité par Sylver94 9 juin 2017 à 21:03:58

Sylver94

11 juin 2017 à 13:19:31

Up, je n'ai toujours pas trouvé de solution. Personne pour m'aider ?

Merci

Serelio

11 juin 2017 à 13:58:39

Hello,

Je reprends à partir d'un bout de ton code pour t'illuster l'exemple.

<div class="image">
    <img src="resources/images/image2.jpg"/>
</div>

Tu peux faire comme ça :

<div class="image">
    <img src="resources/images/image2.jpg"/>
    <p>Ton texte ici...</p>
</div>

.image{position:relative;}

.image p{
    position:absolute;
    left:50%; 
    top:50%;
    transform:translate(-50%, -50%)
}

Pour les faire apparaître au survol :

.image p{display:none;}

.image:hover p{display:block;}

-
Edité par Serelio 11 juin 2017 à 14:06:43

Faites des dons gratuitement sur Goodeed !

Sylver94

12 juin 2017 à 9:28:54

Hello Serelio et merci pour ta réponse ,

j'ai réussi à positionner le texte comme tu l'as indiqué (j'ai juste mis top et left à 25%) mais je n'arrive pas à faire le hover. La balise <p> fait disparaître le texte, du coup j'ai gardé le "div class="text"". Voici mon HTML:

<html>
    <body>
		<div class="images">
			<img class="image image1" src="resources/images/image1.jpg"/>
			<a href="www.redirection1.fr">
				<div class="text" style="top: 25%; left: 25%;">
					Mon texte pour l'image1
				</div>
			</a>
			...
		</div>
	<body>
</html>

Et mon CSS:

	<head>
        <style>
			
			body {
			margin: 0;
			}
			
			.images {
			display: flex;
			height: 10vh;
			flex-wrap: wrap;
			font-size: 0;
			}
			
			.image {
			height: 50%;
			width: 50%;
			opacity: 1;
			display:inline-block;
			}
			
			.image:hover {
			opacity: 0.3;
			}
			
			.text {
			position: absolute;
			width: 40vw;
			transform:translate(-50%, -50%);
			font-family: Gabriola;
			opacity: 0.6;
			display:none;
			background-color: black;
			color: white;
			font-size: 1.5vmax;
			padding: 1vw 1vw;
			}
			
			.image:hover text {
			display:block;
			}
			
			.image1 {
			position: absolute;
			top: 0%;
			left: 0%;
			}
			
		</style>
	<head>

J'ai essayé aussi en mettant "opacity:0" dans la classe text qui devient "opacity:0.6" au survol, mais sans succès...

-
Edité par Sylver94 12 juin 2017 à 9:29:55

Sylver94

14 juin 2017 à 15:04:36

J'ai trouvé. Encore merci à tous de m'avoir aidée

-
Edité par Sylver94 15 juin 2017 à 8:05:14