Tout sur les images (HTML/CSS)

[@EcoleduWeb]

🎓 Tous mes cours sur l'École du Web (si tu veux tous les suivre d'un seul coup) : www.ecole-du-web.net/ 🎁 Tous mes cours sur UDEMY : www.liste-des-cours.com/

[@janjak5285]

Super, tu as tapé dans le mille!! Les images c'est toujours une galère. Bien joué et merci

[@samirsamir7779]

grande chaine , contenu grande qualité..merci

[@electronpositron7005]

Merci Enzo pour tes éclaircissements :)

[@Skyflyer]

Excellent le filter: drop-shadow je ne connaissais pas :)

[@daveglad3554]

Toujours intéressant comme d’habitude !

[@dissid_4676]

Très sympa ton tuto, simple et efficace, je voulais justement avoir ces règles CSS pour gérer les images. J suis graphiste print et ce que tu décris avec les "objects-fit" et "object-position" est pour moi la fonctionnalité la plus importante pour les images. Les images dans les logiciels type indesign, sont gérées comme ça, avec un bloc qui est contenant, ici ta balise avec ton width et ton height. Et le contenu qui est encadré par le contenant. Du coup tu déplaces le contenu en modifiant l'attribut, "object-position", excellent. Merci

[@jimbien7820]

Franchement top comme d'habitude.

[@oliviergeiger7432]

pouce bleu avant de démarrer la vidéo. Vu que je sais quelle va être top

[@benji5589]

Merci pour la vidéo enzo.

[@64zanzan]

bonjour, je débute le développement, et j'aimerais savoir quel code utiliser pour mettre l'image tout à la droite par exemple ?

[@simba7356]

Comment faire des modifications que sur une seule image parmi plusieurs avec css

[@kal20268]

C'est très intéressant !

[@gustinchouloute1907]

Merci pour tes explications

[@commentbienjouerawarzone6451]

Comment on fait pour avoir 3 images au dessus et 3 images en dessous et qu'elles fassent tous la même taille ?

[@EcoleduWeb]

Je me craque le cou à 0:10 on dirait un tic nerveux bizarre. Prenez soin de votre cou !

[@alpasc]

Ah ah ah j avais pas fait gaffe, on entend meme le bruit !

[@ggousier]

Tu te fais des auto séances d'ostéo ! ;)

[@yoloys]

Pourquoi de mon côté ça ne fonctionne pas ? J'ai une photo dans un cercle .photo { margin-left: 7%; border-radius: 50%; width: 130px; height: 130px; overflow: hidden; object-fit: cover; background-size: cover; background-position: center; } J'ai tout essayé mais rien ne bouge, il doit y avoir une erreur que je ne vois pas.

[@codein7764]

keep going like this bro

[@DarkCreatif]

C'est bizarre, je n'arrive pas à modifier mon image png, pourtant dans la feuille style, j'ai bien mis img😭 ( img { width: 30px; }

[@gustinchouloute1907]

Please comment les espacés? Et comment ajouter des textes sur eux. Ça m'intéresse vraiment

[@red-craft]

Comment tu a fait pour avoir le style CSS ?

[@incognito-ik9rh]

tu pourras faire une vidéo sur les vidéos dans visual studio code car c'est impossible de les rajouter à notre site ps super vidéo

[@mathvidal31]

super merci, on peux appliquer des valeur pour choisir la zone de image on veux faire resortir en plus que top right (genre top:50px; right:20%;)?

[@timeoprouet4039]

comment fait-on pour déplacer une image parce que le padding ne fonctionne pas

[@EcoleduWeb]

Beaucoup de choix : margin, position, flex, css grid, top left etc ...

[@stf8375]

super vidéo merci à toi tu m'aides

[@sofianedahmani1723]

Merci Enzo .

[@Sarah_Azzaro]

Merci pour la vidéo tu explique très bien, dis moi pour l'insertion de l'image en vérité on peut autant l'insérer en CSS qu'en html ? Autre question dans mon header mon image prend la moitié. J'ai mis pourtant wight : 100% Je veux que sa prend tout mon header comment faire.

[@FabLoki]

Oui L'insertion en CSS est possible avec la propriété background-image alors qu'en HTML, tu l'insères avec la balise , les deux options fonctionnent. La difference est qu' en l'insérant en HTML, tu as la possibilité de rajouter des informations dans l'attribut -alt pour optimiser l'indexation et le référencement de la page. Pour ton image, il faut que tu définisse manuellement la hauteur de ton image dans le CSS, avec la propriété -height, avec comme valeur soit "auto" soit une hauteur fixe, en px ou vh (pixels ou view height).

[@lamysterieusearmy2521]

Super cool ta vidéo par contre j'aurais une question si tu veux bien voila j'aimerais mettre des images l'une à coté de l'autre tout en ayant un espace entre elles pour mettre du texte (ex: le prix d'un objet qu'on vend en ligne ) si tu peux me répondre ce serais super parce que je galère un peu avec mon code :)

[@faridzo1017]

merci Enzo, quand on a des images trop claire c'est meiux de mettre des filtre avec un logiciel ou ya-t-il des propriétés à utiliser ?

[@EcoleduWeb]

Il vaut mieux utiliser un logiciel en amont ;)

[@micklo406]

Merci 🙏

[@jeantitoujm3337]

Impeccable merci mais je veux superposé deux images

[@DarkCreatif]

merciiiiiiiii

[@EcoleduWeb]

Avec plaiiiiiiiiiiiisir

[@borisvian2664]

cool😎😎

[@latyme9754]

merci merci

[@bouramaouologuem4101]

Merci French 💦

[@AngieBreshka]

le alt c'est aussi pour les personnes handicapés pour le lecteur d'écran. On existe hein

[@EcoleduWeb]

Je l'explique dans des dizaines de vidéos (hein)

[@sg-tt3ul]

Merci!