Soucis avec la taille des images
Fermé
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
-
Modifié le 17 juin 2021 à 17:27
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 20 juin 2021 à 20:16
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 20 juin 2021 à 20:16
A voir également:
- Dans la présentation à télécharger, déplacez l'image dans le cadre sans en modifier la taille. redressez l'image pour que le niveau de la mer soit à l'horizontale. faites correspondre : la ligne avec le niveau de la mer ; le point avec le sommet de la grande voile. combien d'oiseaux sont dans le cadre ?
- Comment réduire la taille d'un fichier - Guide
- Aller à la ligne excel - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? - Forum Musique / Radio / Clip
- Taille 32x32 correspondance ✓ - Forum Loisirs / Divertissements
- Image iso - Guide
6 réponses
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
179
17 juin 2021 à 18:57
17 juin 2021 à 18:57
si je prends 5 images différentes que je leurs donne la même dimension en hauteur avec ce logiciel en ligne et qu ensuite je veux les afficher en html les hauteurs ne sont pas les même
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
179
17 juin 2021 à 19:58
17 juin 2021 à 19:58
je pense qu il faut ajouter ceci
img{ height:350px; width:100%; }
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
17 juin 2021 à 20:50
17 juin 2021 à 20:50
Salut,
Si tu appliques un width: 100%; en css sur ton image, celle-ci va prendre toute la largeur de son conteneur.
Si tu veux que ton image ai la taille de ton fichier source, il suffit normalement de ne pas spécifier de largeur en css ou si besoin spécifier la valeur par défaut width: auto; qui s'adapte au contenu.
https://jsfiddle.net/eqLa3zc2/
Si tu appliques un width: 100%; en css sur ton image, celle-ci va prendre toute la largeur de son conteneur.
Si tu veux que ton image ai la taille de ton fichier source, il suffit normalement de ne pas spécifier de largeur en css ou si besoin spécifier la valeur par défaut width: auto; qui s'adapte au contenu.
https://jsfiddle.net/eqLa3zc2/
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
179
17 juin 2021 à 22:40
17 juin 2021 à 22:40
salut
merci pour la réponse et le fichier
oui avec une image cela fonctionne
mais comment faire si j ai par exemple 3 images de dimensions différentes
par exemple
image 1une hauteur de 250 et une largeur de 300
image 2 une hauteur de 350 et une largeur de 400
image 2 une hauteur de 400 et une largeur de 400
je souhaite que les 3 images puissent avoir par exemple une hauteur de 250
merci pour la réponse et le fichier
oui avec une image cela fonctionne
mais comment faire si j ai par exemple 3 images de dimensions différentes
par exemple
image 1une hauteur de 250 et une largeur de 300
image 2 une hauteur de 350 et une largeur de 400
image 2 une hauteur de 400 et une largeur de 400
je souhaite que les 3 images puissent avoir par exemple une hauteur de 250
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
18 juin 2021 à 07:57
18 juin 2021 à 07:57
Sans déformer les images, au moins 2 solutions possibles selon comment tu souhaites afficher les images dans la grille bootstrap :
1. Contenir l'image dans la colonne (contain) : l'image n'est pas rognée mais il y aura de l'espace vide dans la colonne contenant l'image selon la largeur de la colonne et la taille de l'image.
Pour cela il suffit simplement d'appliquer la propriété max-height sur les balises img avec la hauteur maximum des images.
2. Couvrir l'image dans la colonne (cover) : l'image s'affiche sur toute la largeur de la colonne mais si les proportions de l'image et de la colonne sont différentes, l'image sera rognée pour ne pas être déformée.
Pour cela le plus simple est de remplacer la balise img par une balise div et d'utiliser les propriétés css background pour afficher l'image (background-image, background-size, background-position, etc...). On applique aussi une hauteur avec la propriété height pour cette balise div, pas besoin de définir la largeur puisque celle-ci occupe par défaut toute la largeur de la colonne.
Exemple : https://codepen.io/Pitet/pen/zYZbBQg
1. Contenir l'image dans la colonne (contain) : l'image n'est pas rognée mais il y aura de l'espace vide dans la colonne contenant l'image selon la largeur de la colonne et la taille de l'image.
Pour cela il suffit simplement d'appliquer la propriété max-height sur les balises img avec la hauteur maximum des images.
2. Couvrir l'image dans la colonne (cover) : l'image s'affiche sur toute la largeur de la colonne mais si les proportions de l'image et de la colonne sont différentes, l'image sera rognée pour ne pas être déformée.
Pour cela le plus simple est de remplacer la balise img par une balise div et d'utiliser les propriétés css background pour afficher l'image (background-image, background-size, background-position, etc...). On applique aussi une hauteur avec la propriété height pour cette balise div, pas besoin de définir la largeur puisque celle-ci occupe par défaut toute la largeur de la colonne.
Exemple : https://codepen.io/Pitet/pen/zYZbBQg
" je souhaite que les 3 images puissent avoir par exemple une hauteur de 250 "
Réponse simple:
Mais bon c'est pas très responsive = erreur d'affichage(appelé aussi bug) dans la plupart des cas. Pour ça il faut utiliser une unité autre que le pixel et ne pas chercher à avoir des valeurs fixes(comme 350 px qui ne correspond pas à un écran qui fera 480px de hauteur).
D'ailleurs pourquoi 350px? Si vous vous basez sur votre écran cela implique que tout les utilisateurs de votre site doivent avoir le même écran que vous et la même place prise par les barres de navigation de leur navigateur, la même taille de fenêtre ...
bref ce n'est pas bon de chercher à forcer une taille fixe. Revoyez le tout en scalaire, c'est le grand avantage de Bootstrap: il fait déjà ça.
Réponse simple:
img{ height:350px; }
Mais bon c'est pas très responsive = erreur d'affichage(appelé aussi bug) dans la plupart des cas. Pour ça il faut utiliser une unité autre que le pixel et ne pas chercher à avoir des valeurs fixes(comme 350 px qui ne correspond pas à un écran qui fera 480px de hauteur).
D'ailleurs pourquoi 350px? Si vous vous basez sur votre écran cela implique que tout les utilisateurs de votre site doivent avoir le même écran que vous et la même place prise par les barres de navigation de leur navigateur, la même taille de fenêtre ...
bref ce n'est pas bon de chercher à forcer une taille fixe. Revoyez le tout en scalaire, c'est le grand avantage de Bootstrap: il fait déjà ça.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
179
18 juin 2021 à 20:33
18 juin 2021 à 20:33
bonsoir
merci pour la reponse
et surtout pour l explication
je vais analyser cela a tête reposée car pour l instant j ai un autre petit soucis avec boostrap et le responsive
je reviens plus tard
merci pour la reponse
et surtout pour l explication
je vais analyser cela a tête reposée car pour l instant j ai un autre petit soucis avec boostrap et le responsive
je reviens plus tard
Le mieux c'est de penser en CSS avant tout. Bootstrap est une implémentation de CSS avec JavaScript et des classes et modèles(la grille de 12 colonnes) tout faits.
Donc si vous réfléchissez avant tout au CSS vous aurez plus facilement la réponse.
Ici elle est simple: une largeur de 100% pour une image signifie que l'image prends 100% de la place qui est disponible(et la hauteur sera proportionnelle à la largeur si elle n'est pas indiqué dans la limite de l'espace disponible aussi).
Le reste coule de source une fois que vous avez assimilé cela:
Bootstrap ou pas c'est bien de la propriété CSS "width" dont il est question, donc:
https://developer.mozilla.org/fr/docs/Web/CSS/width
Donc si vous réfléchissez avant tout au CSS vous aurez plus facilement la réponse.
Ici elle est simple: une largeur de 100% pour une image signifie que l'image prends 100% de la place qui est disponible(et la hauteur sera proportionnelle à la largeur si elle n'est pas indiqué dans la limite de l'espace disponible aussi).
Le reste coule de source une fois que vous avez assimilé cela:
Bootstrap ou pas c'est bien de la propriété CSS "width" dont il est question, donc:
https://developer.mozilla.org/fr/docs/Web/CSS/width
flexi2202
Messages postés
3784
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
30 mars 2024
179
20 juin 2021 à 20:16
20 juin 2021 à 20:16
bonjour Tcaro
merci pour cette explication supplémentaire
grâce a vous je comprends mieux tout cela et je suis parvenu enfin a régler le soucis de la taille de mes images
encore merci beaucoup pour cette aide
merci pour cette explication supplémentaire
grâce a vous je comprends mieux tout cela et je suis parvenu enfin a régler le soucis de la taille de mes images
encore merci beaucoup pour cette aide