Soucis avec la taille des images
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
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
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:
- 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
- Partage de photos en ligne - Guide
- Reduire taille image - Guide
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
6 réponses
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
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/
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
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
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