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
bonjour a tous
j ai toujours du m arracher les cheveux avec les images en boostrap

voici mon problème
j essaye de créer tout ce qu il peux y avoir de plus banal comme grille avec des images

sauf que mes images j arrive pas a les intégrer avec leurs vraies dimensions

voici un exemple

https://codepen.io/flexi2202/pen/XWMGrqV

la première image est contenue dans ma grille avec un style de "w100" donc elle devrait faire 100%

la deuxième a été placée en dehors de la grille

je précise que cela est la même image

et voici l image réduite que j obtiens en ligne avec le logiciel addobe et que j utilise

je ne comprends pas avec une image de cette taille comment je peux obtenir des aussi grande images dans mon fichier

normalement je devais avoir une image de

Largeur 107 px
Hauteur 81 px


A voir également:

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
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
0
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
je pense qu il faut ajouter ceci

img{
  height:350px;
  width:100%;
}
0
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
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/
0
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
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
0
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
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
0
" je souhaite que les 3 images puissent avoir par exemple une hauteur de 250 "

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.
0

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
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
0
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
0
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
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
0