La conception Web repsonsive fonctionne bien sur la plupart des éléments HTML sauf les images.Je trouve un gâchis. Lors du redimensionnement des fenêtres, vous ne pouvez pas utiliser les pourcentages de redimensionnement sur une image car il prendra la largeur de l'élément parent et la hauteur. Vous devez définir des largeurs et des hauteurs fixes pour les images ... ou je manque quelque chose?
Alors, comment faites-vous exactement une conception réactive impliquant des images dont l'élément conteneur / parent s'étendra au-dessus de sa largeur natale et rétrécit sous sa largeur natale?
merci
3 Réponses :
La chose faite en conception réactive consiste à définir ceci dans votre CSS pour les images et d'autres éléments: puis dans votre HTML L'image prend simplement la taille de son conteneur. < / p> Vous ne définissez pas la taille de l'image elle-même, il vous suffit de le laisser pousser / se rétrécir.
Qu'en est-il de la hauteur? Est-ce que la taille automatique avec la largeur? En outre, qu'en est-il de IE6-7, apporte-t-il max-largeur?
La hauteur va échouer automatiquement. Voici quelques informations supplémentaires sur les images, y compris comment les faire fonctionner dans des versions plus anciennes de IE si vous voulez / devez les prendre en charge: unstoppablerobotninja.com/ientry/fluid-images
Eh bien, vous pouvez écrire: .selector img {largeur: 100%; Hauteur: auto;}, puis utilisez la taille de la DIV qu'il est dans pour déterminer son échelle. Ou vous pouvez également définir l'image comme arrière-plan et utiliser des méthodes similaires et peut-être même en désordre avec la taille de fond: couverture. Je ferai un jsfiddle ...
Ce que j'ai fait sur mon site est celui-ci:
page de page .... puis dans CSS de sorte que la classe div est styled et que la photo est définie pour le remplir. En utilisant le DIV, je peux aussi styles dans les classes .pic à distinction du texte du corps.