Je veux charger des photos à partir d'un serveur et afficher chacune d'entre elles dans un cadre propre, de sorte que le cadre soit rempli et que l'image soit centrée (et non étirée), si elle est trop grande. Puis-je réaliser cela par exemple avec CSS sans connaître la taille de chaque image ? Peut-être avec max-width ou autre ?
Voici un exemple de ce que je veux :
Vous pouvez utiliser les CSS3 background-size propriété.
Plus précisément, vous devez utiliser soit background-size:contain o background-size:cover .
De la spécification :
Les valeurs ont les significations suivantes :
contenir
Mettre à l'échelle l'image, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la taille la plus grande possible, de sorte que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.
couverture
Mettre à l'échelle l'image, tout en préservant son rapport d'aspect intrinsèque (s'il y en a un), à la plus petite taille telle que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement de l'arrière-plan.
Source : http://www.w3.org/TR/css3-background/#the-background-size
Le choix de l'une ou l'autre dépend du rapport d'aspect des images originales que vous utilisez.
Faites défiler la page de cette ressource pour voir quelques exemples : http://www.css3.info/preview/background-size/
La chose la plus rapide à faire est de placer l'image en arrière-plan et de la centrer :
style="background: url(images/42.png) 50% 50% no-repeat"Les images plus petites que la boîte seront centrées dans la boîte. Les images plus grandes seront recadrées.
L'inconvénient est qu'il n'y a pas de mise à l'échelle.
Pour la mise à l'échelle, il faut connaître les dimensions, faire des calculs mathématiques pour déterminer une quantité de mise à l'échelle qui préserve le rapport d'aspect et utiliser un élément réel qui se trouve à l'intérieur d'un conteneur de recadrage qui utilise "overflow : hidden".
Voilà ce que vous faites. Si par exemple l'image se trouve à l'intérieur d'un DIV avec un ID appelé "boxer", vous allez maintenant créer un CSS qui redimensionnera automatiquement toutes les images qui se trouvent à l'intérieur du DIV avec l'ID "boxer" Le CSS ressemblera à ceci
#boxer img {
Width: 600px
Height: 600px;
}La feuille de style en cascade ci-dessus redimensionnera automatiquement l'image que vous placerez à l'intérieur en fonction des spécifications de la feuille de style en cascade. Cela conviendra parfaitement à la boîte portant l'ID "boxer" si ses dimensions correspondent à celles du CSS. Vous pourriez simplement faire 100% pour la largeur et la hauteur, de cette façon il s'adapte à la boîte.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
