Curseur Image: maintien de la même hauteur pour toutes les images tout en gardant le curseur réactif
Dans mon JS curseur sur l'image (Owl Carousel), les images ont des dimensions différentes:
Vous pouvez voir que la hauteur de l'image varie dans le carrousel. Comment la rendre constante tout en gardant carrousel sensible? J'ai besoin d'images pour remplir le curseur espace, à tout moment, par conséquent, d'autres devront être recadrée par CSS en quelque sorte. Le résultat souhaité ressemble à ceci:
source d'informationauteur drake035
Vous devez vous connecter pour publier un commentaire.
Il peut être spécifié dans le css.
Exemple,
http://jsfiddle.net/AwBLL/2/
MODIFIER
La solution suivante utilise le plugin événements de rappel pour modifier la fenêtre d'affichage de l'/wrapper de la hauteur en fonction de la plus petite hauteur de l'image.
http://jsfiddle.net/DNMpF/1/
js
css
EDIT2
Concernant le dernier commentaire, pour montrer la partie inférieure de la grande images, une approche pourrait être de parcourir les images et ajouter un négatif marge supérieure égale à la partie de ces images cachées.
Diapositives avec une hauteur aléatoire à http://jsfiddle.net/AwBLL/108/
HTML:
CSS:
JS:
si vous êtes à l'aide de div avec une image de fond dans votre carsoual
Vous pouvez essayer de contrôler la taille de l'arrière-plan à l'aide de la
background-size
propriété.Ou d'autre si vous les utiliser, alors vous pouvez utiliser
auto resize
selon conteneur largeur}
Souhaite que vous pourriez mettre en place un violon, mais du haut de mon Notepad++ vous pourriez essayer de mettre cela au bas de votre page et voir si cela fonctionne pour vous.
si cela fonctionne, il y a de meilleures façons d'écrire cela, mais ça vous donne le début d'une solution
Mes images sont chargées dynamiquement, ce qui signifie que le nom de l'image peut changer de temps à autre, comment conserver une image de fond et passer le bon nom de l'image dans le fichier css?
Vous pouvez atteindre la même hauteur à l'aide de flexbox.
Essayez ceci: