J'apprends comment utiliser Flex Slider pour faire des curseurs et des carrousels d'image. Cependant, Flex ne semble que si toutes les images sont exactes de la même largeur et de la même hauteur.
Le problème peut être vu dans le site Web suivant:
https://dl.dropboxusercontent.com/u/785815/bastion/index. HTML
Les images sont assez grandes, alors soyez patient pendant le chargement.
Mon site Web de test comprend plusieurs images, avec une largeur et une hauteur différentes. Pour résoudre ce problème, je dois les redimensionner pour avoir la même largeur et la même hauteur, et j'ai aussi besoin de les centrer en raison des rapports de largeur de la largeur.
Alors, j'aimerais savoir si:
Pour répondre à cette question, j'ai trouvé les articles suivants:
J'apprécie toute aide possible, Pedro.
3 Réponses :
Pour résoudre ce problème, j'utilise CSS - la meilleure façon la plus rapide et la plus simple, je pense ...
@media only screen and (max-width: 480px) {
#your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
#your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
#your_slider_id_or_image_id {width:000px;height:000px;}
}
Comment cela créera-t-il l'image? : S que je dois essayer, merci d'avoir essayé!
Cela pourrait changer votre image ou votre taille de curseur sur différentes résolutions. Vous pourrez donc modifier tout votre contenu comme vous le souhaitez :) Vous pouvez également ajouter plus de CSS et faire plus de choses personnalisées ici, non seulement modifier la taille des images. J'utilise cette affaire CSS3 pour un design réactif, j'espère que cela aidera ... Si vous aurez plus de questions, n'hésitez pas à vous demander ...
D'accord, votre solution me permet de dessiner quelque chose de différent en fonction de la taille de l'écran physique de l'utilisateur. Cependant, je ne sais toujours pas comment aborder le fait que j'ai plusieurs images avec des tailles très différentes. Existe-t-il un moyen de redimensionner automatiquement en fonction de leur rapport de largeur?
Eh bien, j'ai perdu beaucoup de temps avec cela, alors je pourrais aussi bien donner un essai dans ma propre question. Je résolvez ce problème avec CSS3:
<ul class="slides">
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_0_Foreward.png" />
</li>
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_Calamity.png" />
</li>
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_CalamityKid.png" />
</li>
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_ColdWarKid.png" />
</li>
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidThinking.png" />
</li>
<li>
<img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidVsScumbag.png" />
</li>
</ul>
</div>
Vous pouvez également recadrer vos images en ajoutant les propriétés suivantes aux sélecteurs existants :
Vous ne devez jamais créer un lien vers un fichier sur un stockage en ligne comme Dropbox, car le fichier peut être supprimé à l'avenir; Par conséquent, ce n'est pas bon pour la communauté qui vient à votre question à la recherche d'une solution à leur propre problème. À l'avenir, veuillez reproduire le problème dans un éditeur de code en ligne tel que jsfiddle