Bootstrap 3 survol de l'image réactive
Est-il une solution pour répondre image du passage de la souris pour Bootstrap 3?
Voici mon code: http://jsfiddle.net/4gac7/
.image{
background-image:url("http://placehold.it/350x150/000/fff");
width:350px; /* responsive possible ?? */
height:150px;
}
.image:hover{
background-image:url("http://placehold.it/350x150/ccc/fff");
}
Merci!
- Pouvez-vous expliquer plus ? Je ne comprends pas.
- Je voudrais avoir réactif mouseover images comme ceci jsfiddle.net/4gac7/1 Sur mobile, je suis en mesure de toucher sur une image et je voudrais le voir de la souris sur l'image. Le problème n'est pas sensible car div besoin de largeur et de hauteur.
Vous devez vous connecter pour publier un commentaire.
Il aura besoin de plus de code HTML, mais vous pouvez utiliser la même technique de base comme http://alistapart.com/article/creating-intrinsic-ratios-for-video/. Vous aurez besoin de définir une largeur de quelque part (parce que les images d'arrière-plan n'ont pas intrinsèque dimensions), mais cela peut venir d'un élément parent. Essentiellement:
Voici un peu de documentation sur fond de taille. Deuxièmement, le rapport d'aspect peut être délicat: Si le ratio est de 2:1 (si l'image est deux fois plus large que haut), puis le
padding-bottom
sur.wrapper-with-intrinsic-ratio
serait50%
. Travailler avec (hauteur ÷ largeur) × 100. Ainsi, par exemple, votre 350×150 px image seraitpadding-bottom: 42.857%;
et pour un150x350px it'd be 233.333%
.Sinon, vous pourriez le faire avec deux éléments img. Maladroit, mais...
Ou vous pouvez utiliser javascript.
padding-bottom
sur.wrapper-with-intrinsic-ratio
serait50%
. Travailler avec (hauteur ÷ largeur) × 100. Donc, pour un 350×150 px de l'image, ça seraitpadding-bottom: 42.857%;
et pour un 150x350px c'est être233.333%
. Je vais modifier cela dans la réponse.Ou vous pouvez simplement utiliser une simple balise html onmouseover & lui donner une classe de img-responsive de bootstrap.
CSS:
HTML:
http://jsfiddle.net/McKmillions/7t63cja2/