Tout sur les images (HTML/CSS)
HTML-код
- Опубликовано: 27 июл 2024
- 🎓 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/
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designer-du-web.com/news
Le lien du Discord : / discord
Ma chaine en Anglais :
/ @thewebschool
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/formateur/enzo_us...
Abonne-toi à ma chaîne :
/ @ecoleduweb
Suis-moi sur Twitter :
/ ledesignerduweb
Si tu veux que je fasse des vidéos sur certains sujets dis le moi!
-----------------------------------------------------------------------------------------
🎓 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/
Toujours intéressant comme d’habitude !
Super, tu as tapé dans le mille!! Les images c'est toujours une galère. Bien joué et merci
grande chaine , contenu grande qualité..merci
Merci Enzo pour tes éclaircissements :)
Franchement top comme d'habitude.
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
Excellent le filter: drop-shadow je ne connaissais pas :)
Merci pour la vidéo enzo.
C'est très intéressant !
super vidéo merci à toi tu m'aides
Merci pour tes explications
pouce bleu avant de démarrer la vidéo. Vu que je sais quelle va être top
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%;)?
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 :)
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
Merci Enzo .
keep going like this bro
Merci!
bonjour, je débute le développement, et j'aimerais savoir quel code utiliser pour mettre l'image tout à la droite par exemple ?
Comment faire des modifications que sur une seule image parmi plusieurs avec css
Merci 🙏
Je me craque le cou à 0:10 on dirait un tic nerveux bizarre.
Prenez soin de votre cou !
Ah ah ah j avais pas fait gaffe, on entend meme le bruit !
Tu te fais des auto séances d'ostéo ! ;)
Comment tu a fait pour avoir le style CSS ?
Comment on fait pour avoir 3 images au dessus et 3 images en dessous et qu'elles fassent tous la même taille ?
Please comment les espacés?
Et comment ajouter des textes sur eux.
Ça m'intéresse vraiment
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 ?
Il vaut mieux utiliser un logiciel en amont ;)
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.
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).
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.
C'est bizarre, je n'arrive pas à modifier mon image png, pourtant dans la feuille style, j'ai bien mis img😭 ( img {
width: 30px;
}
Impeccable merci mais je veux superposé deux images
merci merci
cool😎😎
comment fait-on pour déplacer une image parce que le padding ne fonctionne pas
Beaucoup de choix : margin, position, flex, css grid, top left etc ...
merciiiiiiiii
Avec plaiiiiiiiiiiiisir
Merci French 💦
le alt c'est aussi pour les personnes handicapés pour le lecteur d'écran. On existe hein
Je l'explique dans des dizaines de vidéos (hein)