besoin d aide pour un code css

Marsh Posté le 26-11-2023 à 01:32:06

Bonjour je peine avec mon code css avec flexbox, je n'arrive pas à mettre les images en galerie avec des tailles identiques sans modifier la taille. Et mettre les photos en noir et blanc sauf une.
Qui peut m'aider?
Voici mon code css sur vs code : body {
max-width: 1200px;
margin: auto;
background-image:url("bg.jpg" )
}
h1 {
text-align:center;color: green;}

.galerie {
display:flex;
font-size : 20px
background-color:
flex-direction:row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: center;
justify-items: center;
align-items:center;
padding: 20px 10px
width:100%;
max-width : 100%
height:auto
Object-fit: cover
}

et mon code html :
<!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">
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style></style>
<title>Galerie des animaux de la forêt</title>
</head>
<body>
<h1>Les animaux de la forêt</h1>
<div class="galerie">
<img src="images/Biche.jpg">
<img src="images/Blaireau.jpg">
<img src="images/Ecureuil.jpg">
<img src="images/Herisson.jpg">
<img src="images/Lapin.jpg">
<img src="images/Libellule.jpg">
<img src="images/Lievre.jpg">
<img src="images/Lapin.jpg">
<img src="images/Loup.jpg">
<img src="images/loutre.jpg">
<img src="images/Lynx.jpg">
<img src="images/Mante_Religieuse.jpg">
<img src="images/Marcassin.jpg">
<img src="images/Ours.jpg">
<img src="images/OursAssis.jpg">
<img src="images/Renard.jpg">
<img src="images/Renard1.jpg">
<img src="images/Couleuvre.jpg">
<img src="images/Ecureuil.jpg">
<img src="images/Sanglier.jpg">
</div>
</body>
</html>

Reply

Marsh Posté le 26-11-2023 à 01:32:06

Reply

Marsh Posté le 27-11-2023 à 13:19:07

Bonjour,
Pour la même taille des images, il va falloir mettre un style width et/ou height sur les <img />. Pour qu'elles aient toutes la même taille, ça va supposer qu'elle aient bien toute le même ratio.

Pour le n&b : https://developer.mozilla.org/fr/do [...] /grayscale
Mais faudra mettre une class sur l'image à pas mettre en n&b (ou l'inverse (une class pour toutes celles en n&b et rien pour celle en couleur).

Au passage, merci d'utiliser la balise [code] pour poster du code afin de le rendre plus lisible

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 30-11-2023 à 22:47:12

exemple rapide : https://codepen.io/arnogues/pen/PoVdaaK

Code :

<img src="https://placekitten.com/200/286"/>
<img src="https://placekitten.com/203/286"/>
<img src="https://placekitten.com/200/284"/>
<img src="https://placekitten.com/202/286"/>

Code :

img {
--greyscale:1;
max-width:150px;
filter:grayscale(var(--greyscale));
transition: filter 0.5s ease-in-out;
}
img:hover {
--greyscale:0;
}

Je passe par une variable CSS c'est plus simple à maîtriser

---------------
Blablaté par Harko

Reply

Marsh Posté le 02-12-2023 à 10:35:09

C'est beau, tout ça en si peu de lignes et si simple à comprendre [:emerveille]

---------------
Topic .Net - C# @ Prog

Reply

Marsh Posté le 02-12-2023 à 16:32:15

Bah surtout que ya pas besoin de plus pour l'exemple

---------------
Blablaté par Harko

Reply

besoin d aide pour un code css

Sujets relatifs:

Leave a Replay