CSS tailwind taille des images

a marqué ce sujet comme résolu.

Bonjour,

Je travaille sur le développement d’un site web et je rencontre un petit problème de mise en page avec le framework TailwindCSS. J’affiche des images sur la page d’accueil de mon site et j’aimerais bien que leur taille dépende de la taille de l’écran…

Voici mon code HTML :

<!DOCTYPE html>
<html>
	<head>
		<title>Christian Goux</title>
  		<script src="https://cdn.tailwindcss.com"></script>
		<meta charset = "utf-8">

	</head>
	<body class = "">
		<header class = "bg-yellow-400">
			<div class = "grid justify-items-center grid-cols-1">
				<t1 class = "text-5xl text-red-600 m-10"  style = "font-family : cursive;">Bienvenue !</t1>
			</div>
		</header>
		<section class = "flex flex-col bg-yellow-200 p-10 min-h-screen">
			<div class = "basis-1/2">
				<div class = "grid justify-items-center grid-cols-3">
					<div class = "grid justify-items-center grid-cols-1">
						<img src = "https://bdi.dlpdomain.com/album/9782505009184-couv.jpg" class = "w-3/4">
					</div>
					<div  class = "grid justify-items-center grid-cols-1">
						<img src = "https://i.pinimg.com/originals/31/2b/66/312b66b0c568d4923fd26a0c80153499.png" class = "w-3/4">
					</div>
					<div  class = "grid justify-items-center grid-cols-1" >
						<img src = "https://i.pinimg.com/originals/d5/7b/00/d57b006e00e8d0c0e11332f50e5a27e3.jpg" class = "w-3/4">
					</div>

				</div>
			</div>
			<div class = "grid justify-items-center grid-cols-1">
				<t1 class = "text-5xl text-red-600 m-8" style = "font-family : cursive;">Découvrez l'oeuvre de Christian Goux !</t1>	
				<a href = "#"><button class =  "bg-yellow-500 hover:bg-yellow-500 text-red-600 font-bold py-2 px-4 border-b-4 border-yellow-800 hover:border-yellow-800 rounded-full m-8 text-2xl hover:px-5 hover:py-3"  style = "font-family : cursive;">Accéder à la collection complète</button></a>
			<div class = "basis-1/2">
				<div class = "grid justify-items-center grid-cols-3">
					<div class = "grid justify-items-center grid-cols-1">
						<img src = "https://bdi.dlpdomain.com/album/9782505009184-couv.jpg" class = "w-3/4">
					</div>
					<div  class = "grid justify-items-center grid-cols-1">
						<img src = "https://i.pinimg.com/originals/31/2b/66/312b66b0c568d4923fd26a0c80153499.png" class = "w-3/4">
					</div>
					<div  class = "grid justify-items-center grid-cols-1" >
						<img src = "https://i.pinimg.com/originals/d5/7b/00/d57b006e00e8d0c0e11332f50e5a27e3.jpg" class = "w-3/4">
					</div>

				</div>
			</div>
			</section>
			<footer class = "grid justify-items-center grid-cols-1 bg-yellow-600">
				<p class = "text-lg text-white m-10">Ce site donne accès à une synthèse des ouvrages du brillant dessinateur Christian Goux. Profitez bien ! </p>
			</footer>
		</div>
	</body>
</html>

Ma page s’affiche parfaitement quand le navigateur prend la moitié de l’écran, mais quand je passe en plein écran, seul les images du haut s’affichent…

Merci d’avance pour votre aide,

@flopy78

+0 -0

Hello,

Tu entends quoi par "en plein écran" : quelle taille d’écran ? Est-ce uniquement à une dimension particulière ? Une plage de dimensions ? Est-ce un problème lié à la hauteur ou à la largeur du viewport (en gros la fenêtre) ?

Pour info tu utilises une balise <t1> qui n’existe pas en HTML. Je suppose que tu voulais un <h1>.

Ensuite attention aux images sans attribut alt : si elles ont un intérêt sémantique les lecteurs d’écran ne sauront pas quoi sortir aux visiteurs. Si elles ne sont que décoratives et n’apportent rien de pertinent aux visiteurs, tu peux mettre un attribut vide (alt="").

Je t’invite à faire valider ton code pour s’assurer qu’il soit correct : https://validator.w3.org/nu/#textarea

+1 -0

Bonjour,

Merci pour ces corrections ! Après coup, je me suis rendu compte que le problème ne touche pas uniquement les images, mais aussi le header… Quand la fenêtre du navigateur prend la moitié de l’écran, les proportions sont OK, mais quand je passe le mode "plein-écran", il double de longueur sans en faire autant avec la hauteur, et je n’ai plus les mêmes dimensions…

J’aimerais bien que la hauteur s’adapte pour que les dimensions soient gardées…

Bonne journée,

@flopy78

+0 -0

Alors j’ai l’impression que tu mélanges le vocabulaire ici : tu parles de proportions et de dimensions. Ton problème est à quel niveau exactement ?

Et quand tu parles de plein écran, c’est quelles dimensions plus précisément ?

As-tu essayé de produire le même résultat sans Tailwind, avec ton propre CSS ? Utiliser cet outil n’absout pas de comprendre ce qu’il se passe sous le capot.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte