Salut tout le monde, j’ai récemment commencé un faux site web d’agence de voyage pour me pratiquer à coder et je suis depuis quelque jours bloqué. Voilà en gros je veux mettre trois images au début de la page qui « fade » une par une en boucle. Cette partie là n’est pas un problème jusqu’à maintenant mais le problème est que je n’arrive pas à faire fit l’image dans tout l’espace de la page sans toute fucker les images en dessous. Voici le rendu du site jusqu’à maintenant:
Vous pouvez voir qu’il y a des bande blanche autour de l’image. J’ai essayer de modifier la taille de l’image et de la changer avec une autre mais ça à pas l’air d’être ça. Je vous mets ma git repo ici: GitHub - renaudlandry123/mytripwebsite.
si vous avez une quelconque réponses ça me ferait vraiment plaisir, merci d’avance !!
Je vois que tu as besoin d’aide pour faire en sorte que les images de ton site web remplissent tout l’espace de la page sans déformer les images en dessous. Il existe plusieurs façons d’y parvenir, mais je te suggère de commencer par le CSS. Tu peux utiliser des propriétés telles que max-width et max-height pour contrôler la taille des images et éviter qu’elles ne déforment les autres éléments sur la page. Tu peux également utiliser des classes ou des identifiants pour appliquer différents styles à chaque image. Enfin, tu peux ajouter un attribut alt à chaque image pour améliorer l’accessibilité et le référencement.
J’espère que cela t’aidera à résoudre ton problème !
@Robolivier Ce n’est pas la taille qui bug, je pense que c’est plus le padding qui n’est pas bien ajuster est ce que tu pourrais arranger ce code css: #ImageAccueil {
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
Ce problème avec les images semble assez courant. Voici quelques conseils qui pourraient t’aider :
Utilise du CSS, comme max-width et max-height, pour afficher des images qui s’ajustent à ta page web sans déformer les autres éléments.
Si tu souhaites appliquer un style particulier à une image, tu peux le faire en lui attribuant des classes ou des identifiants.
N’oublie pas de renseigner un attribut alt aux images afin d’améliorer l’accessibilité pour les utilisateurs ayant des difficultés visuelles.
Essaye ces astuces et vois si ça régle ton problème ! Si ce n’est toujours pas bon, n’hésite pas à m’en dire plus sur la manière dont tu cherches à ajuster le padding et le code CSS de ton image d’accueil.
Je serai heureux de t’aider davantage !
@Robolivier J’ai essayer mais ça n’a pas l’air de marcher, est ce que je dois le régler en px, pourcentage ou vw et vh ? Est ce que tu pourrais me donner un exemple de comment l’utiliser.
Vous pouvez ajuster les images en utilisant une des trois unités de mesure: px, % et vw / vh. Vous devriez définir une largeur et une hauteur précises pour chaque image. Voici un exemple qui peut être appliqué à votre page HTML:
img {
max-width: 100%; /* La largeur maximale de l'image aura la même taille que son parent */
max-height: 80%; /* La hauteur maximale de l'image sera de 80 % de sa hauteur originale */
}
De cette façon, votre image ne déformer pas d’autres éléments sur la page web et s’ajustera à la taille du conteneur. Si vous avez besoin d’une aide supplémentaire, n’hésitez pas à mentionnez @Robolivier.
@Robolivier Le problème n’est pas que l’image influence les autres images mais plutôt qu’elle ne remplis pas complètement la page et laisse des bord blanc. voici mon code:
Essayez d’utiliser max-width et max-height pour ajuster les images de manière à ce qu’elles remplissent le conteneur sans créer des bords blancs. Vous pouvez également utiliser des classes CSS et des identifiants pour afficher des images qui remplissent la page sans déformer les autres éléments. Pensez également à attribuer un attribut alt à l’image afin que ses informations soient accessibles aux moteurs de recherche et aux personnes atteintes d’un handicap visuel.
Si vous avez besoin d’aide supplémentaire, n’hésitez pas à mentionner @Robolivier et je me ferai un plaisir de vous aider.
Vous avez rencontré un problème avec votre page HTML ? Je peux vous aider ! Voici quelques astuces pour afficher les images correctement sur votre page web :
Utilisez du CSS, max-width et max-height pour les dimensions des images.
Utilisez des classes ou identifiants spécifiques pour chaque image.
Assignez un attribut alt aux images afin de rendre le site plus accessible.
Si vous souhaitez modifier le padding et le code CSS de l’image d’accueil, vous pouvez essayer de le régler en utilisant ce qui suit : px, % ou vw/vh. Pensez à assigner une largeur et hauteur précise. Si vous avez besoin d’une aide supplémentaire, n’hésitez pas à mentionner @Robolivier !
Je serai heureux de pouvoir vous aider.
@Robolivier finalement l’erreur vient de la position, je l’ai set à absolute au lieu de relative et ça prend maintenant tout l’image mais maintenant les autres qui etait en dessous l’images principales font un overlap avec l’imag principale. est ce que tu aurais un moyen de display les images en dessous de l’image principale ? voici le code:
Pour résoudre le problème de la mise en page, vous pouvez modifier le positionnement relatif/absolu des images et appliquer un décalage vertical avec des classes/identifiants. Vous pouvez également utiliser un max-width et un max-height pour assurer que l’image principale ne déforme pas les autres images. N’hésitez pas à mentionner @Robolivier si vous avez besoin d’aide supplémentaire.
Bonne chance! :)`
@roboliviermax-width et max-height ne marche pas, aurait tu une autre technique. pourrais tu aussi me dire comment modifier le positionnement relatif/absolu des images et appliquer un décalage vertical avec des classes/identifiants en modifiant ce code css:
Oui, il existe d’autres techniques pour ajuster max-width/max-height et modifier le positionnement/décalage vertical avec du CSS. Vous pouvez utiliser des fonctionnalités comme la propriété position, top, bottom, left et right. Ces propriétés peuvent être utiles pour contrôler le comportement de chaque élément HTML sur votre page.
Vous pouvez également configurer des classes ou des identifiants uniques qui vous permettront de mieux cibler les éléments que vous souhaitez modifier.
Mentionnez @Robolivier si vous souhaitez obtenir de l’aide supplémentaire concernant la création d’une page HTML !
Perso, quand je veux faire en sorte qu’une image prenne toute l’espace, je la mets en CSS background-image avec la propriété background-size:cover.
Ensuite, tu spécifie la taille de ton div. Puisqu’on dirait bien que tu veux que ça prenne toute la hauteur de la page, tu peux mettre
height:100VH; /* VH veut dire Vertical Height. Tu peux aussi faire calc(100VH - 25px) si tu veux avoir la hauteur - un nombre de pixel fixe.*/
display:block; /* margin:auto et display:block vont centrer ton div */
width:100%; /* Pour être responsive en bas de max-width */
max-width: 1100px ;/* la largeur maximale de ton image */
margin: auto; /* Pour centrer le div. Seul margin-left et margin-right sont important alors tu peux les déclarer indépendamment si tu veux ajouter une marge en haut et en bas. /*
Merci de la précision ! Finalement c’était juste le padding de base de la page que j’avais oublier de sup donc tout est beau.
D’ailleurs j’ai rencontré un autre petit problème en essayant de faire que mes images puisse rediriger à une autre page (chacune des pages aurait la même allure, seulement le texte et les images serait différents). Je voulais d’abord créer une component pour tout les images mais je me suis dis que ça serait plus efficace si chaque images avait un id qui les différenciait, le texte de chaque page serait donc différent selon les info dans les datas.
Malheureusement je pense que ce genre de méthode est plus utile dans des sites simplistes puisque lorsque je veux loop sur ces data dans ma component home.vue, c’est toute ma page qui loop incluant mon image d’accueil.
Est ce que tu as une technique quand tu fais un site pour ne pas avoir à faire plein de component et de pouvoir relier toutes ces pages dans une component qui dirige ces pages ou alors ce serait mieux de juste créer une page pour chacune des images ? merci ! ma repo au cas où: GitHub - renaudlandry123/mytripwebsite
Chaque component contient des sub-components qui contiennent des sub-components qui contiennent des sub-components.
Non seulement ça, mais j’utilise Vuetify (que je te recommande fortement d’utiliser) qui offre à lui-même des milliers de components que tu peux ensuite intégrer aux tiens.
Idéalement, tu as une page par type de contenu à afficher. Donc pour La Tranchée on a une page /_formation, /_blog, /_recherche, /_lecon, etc.
Et, même à ça, tu veux simpifier les choses avec les Templates et les Nested Templates.
Plus le site est complexe, plus ça devient vite le chaos alors tu dois faire attention avec la façon que tu fais ton code!
Yes, j’avais entendu parler de vuetify j’allais bientôt commencer la formation sur vue mastery ! Je note pour les prochains sites web, mon site est relativement simple alors j’avais pas vraiment besoin de définir une component pour chaque images. un gros merci pour ta réponse !
