J'essaie d'expérimenter avec un design réactif. Mes images ne redimensent pas actuellement. Dans mon balisage, j'ai aussi des images de fond appliquées à certaines divs qui doivent être redimensionnées.
Voici la vue HTML: http://jsbin.com/emojeg/2
Voir le code ici: http://jsbin.com/emojeg/2/edit
Pour la largeur d'écran entre 800px et 1100px, je voudrais redimensionner les images. Pour quelque chose de moins de 800px, je voudrais aligner les cadres d'image verticalement - 1 ou 2 par ligne quelle que soit la largeur de l'écran.
Actuellement, lorsque je redimensionnez le navigateur à la largeur plus étroite, jusqu'à 2 des cadres enveloppent à la rangée suivante, mais si je continue à redimensionner, le fond de l'image de l'image semble couper et certaines des images semblent disparaître. Je ne sais pas comment résoudre ce problème.
4 Réponses :
C'est parce que ce curseur que vous utilisez a des charges de positionnement absolu et de largeurs / hauteurs fixes. Je recommanderais d'utiliser quelque chose qui est réellement réactif, comme FlexSlider ( http://www.woothemes.com/flexSlider/ )
Mais si vous ne voulez pas faire cela, vous pouvez supprimer la position: relative et la hauteur fixe de la classe .mrpv_container - le reste de Le CSS devrait probablement être nettoyé aussi, mais cela donne-t-il l'effet souhaité?
À propos de FlexInlider, non je ne peux pas l'utiliser comme ce que j'essaie d'atteindre est un peu différent. Votre suggestion CSS semble fonctionner dans une certaine mesure. Il aligne les divs verticalement dans la largeur de navigateur plus étroite. Je pense que j'ai encore besoin de nettoyer un peu de nettoyage pour lui donner un meilleur look. Savez-vous comment mes images et mes images de fond ne redimensionnent pas?
Une autre chose ... Et si je veux créer un balisage différent pour les affichages mobiles - Comment puis-je faire cela? Par exemple, sur des appareils mobiles, si je veux afficher une image d'image à la fois au lieu de 4, je devrai modifier l'ensemble du marquage. Comment puis-je réaliser cela? Je ne pense pas que cela puisse être fait avec des requêtes médiatiques seules. Des suggestions à ce sujet?
Quel est l'effet que vous essayez d'atteindre? Et si vous souhaitez que vos images redimensionnent, vous devez supprimer la largeur maximale: 100% de l'IMG {} CSS et le modifier à la largeur seulement: 100%. Et quant à la chose mobile, ai-je raison de penser que vous voulez que ce soit un curseur de quatre haut sur des ordinateurs de bureau, mais ne montre qu'un article à la fois pour mobile?
Changer max-largeur sur largeur ne semble pas fonctionner dans ce cas. Il semble bloquer l'image. Je pense que c'est parce que le parent de l'image div a une largeur fixe. Mais si je ne le réglais pas à une largeur ou à une hauteur fixe, l'image d'arrière-plan n'apparaîtra pas. Je suis toujours incapable de me mettre la tête autour de cela. Dans mon exemple, il y a des images de fond à part des images seulement.
Oui, vous avez raison sur la chose mobile. Sur des écrans plus étendus, je veux que toutes les quatre cadres d'image se présentent à la fois mais sur l'écran étroit (mobile avec écran portrait), je souhaite que le curseur converti en un élément à la fois. Je sais que cela aura probablement besoin d'ajustement au balisage HTML lui-même. Je suis peut-être à recréer la mise en page. Je ne sais tout simplement pas comment aborder cela - si les requêtes des médias vont suffire ou si je dois utiliser JQuery pour le faire ou avoir un fichier HTML totalement différent chargé pour mobile.
J'ai aussi expérimenté avec un design réactif et trouvé "Bootstrap" de Twitter pour être incroyablement utile. Ce ne sont que 3 fichiers et je construis tous mes sites avec elle. Vérifiez si vous n'avez pas déjà: http://twitter.github.io/bootstrap/
Oui, j'ai initialement voulu utiliser Bootstrap mais je pensais qu'il serait plus facile sans elle, car mon curseur a de nombreux positionnements absolus avec différentes couches. Si rien d'autre ne fonctionne, je devrais peut-être revoir Bootstrap à nouveau.
Eh bien, j'ai utilisé Twitter Bootstrap ainsi que http://responsiveimg.com/ pour faire des images réactives et corrigées Le rapport d'aspect également selon l'écran et la taille de l'image.
Si vous utilisez un curseur d'image, alors jquery bxslider est également très utile
Pour obtenir vos images et vos arrière-plans pour redimensionner correctement, je suggère les modifications suivantes.
Définissez d'abord votre largeur et votre hauteur d'image avec des pourcentages, permettant une suffisamment d'espace pour le cadre autour des bords et utilisez la position : Relative code> pour ajouter un pourcentage de compensation du haut plutôt que de définir une marge. Vous n'avez pas besoin de vous inquiéter de la position horizontale, car il est déjà centré, à moins que vous ne souhaitiez l'ajuster un peu pour tenir compte du fait que votre image de cadre n'est pas parfaitement même. P> @media screen and (max-width: 600px) {
ul.mrpv_slider li div.image_container {
height:162px
width:125px;
}
}
Merci pour votre réponse. Je n'ai pas encore eu la chance de le tester sur mon code mais cela m'a donné une idée.
En fait, vous ne redimensez pas les images, n'est-ce pas? Quand je limite mon explorateur, je ne peux pas voir redimensionner, juste des mouvements d'image
@Chococruccez dans l'URL ci-dessus, non je n'ai pas redimensionné. J'ai essayé de le redimensionner dans une autre version, mais j'ai d'autres problèmes avec mes divs absolus, etc. que je trouve difficile de convertir en réactif.
Ok, juste pour être sûr, dans cet exemple, vous voulez simplement vous assurer que tous entrent dans des colonnes lors du redimensionnement, mais ce que vous voulez réaliser est que les colonnes + redimensionnement sont correctes?
@CHOCOCROCRO bien essentiellement sur des écrans plus larges, lorsque vous avez redimensionné, je veux que les cadres et les arrière-plans redimensionnent proportionnellement. Sur l'orientation du paysage mobile, je veux que toutes les quatre cadres d'image se présentent à la fois. Sur l'orientation portrait mobile, je souhaite que le curseur soit converti en un élément à la fois. Je sais que cela aura probablement besoin d'ajustement au balisage HTML lui-même. Je suis peut-être à recréer la mise en page. Je ne sais tout simplement pas comment aborder cela - si les requêtes des médias vont suffire ou si je dois utiliser JQuery pour le faire ou avoir un fichier HTML totalement différent chargé pour mobile.