Bootstrap 3 mouseover图像响应

针对Bootstrap 3的响应式图像鼠标hover是否有任何解决方案？

这是我的代码： 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"); } 

谢谢！

Answer 1

它需要更多HTML代码，但您可以使用与http://alistapart.com/article/creating-intrinsic-ratios-for-video/相同的基本技术。 您需要在某处设置宽度（因为背景图像没有内部尺寸），但这可能来自父元素。 实质上：

 
 .wrapper-with-intrinsic-ratio { position: relative; padding-bottom: 20%; /* Adjust this to suit the aspect ratio of the image */ height: 0; width: 100%; } .element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("http://sofzh.miximages.com/jquery/fff.png"); background-size: cover; } .element-to-stretch:hover { background-image: url("http://placehold.it/350x150/ccc/fff"); } 

这里有一些关于background-size的文档 。 其次，纵横比可能很棘手：如果比例为2：1（因此图像宽度是其高度的两倍），那么padding-bottom的.wrapper-with-intrinsic-ratio将为50% 。 用（高度÷宽度）×100来计算。例如，你的350×150px图像将是padding-bottom: 42.857%; 对于150x350px it'd be 233.333% 。

或者，您可以使用两个img元素。 笨重，但……

 
  
 div img { max-width: 100%; height: auto; } div img.normal, div:hover img.hover { display: block; } div img.hover, div:hover img.normal { display: none; } 

或者你可以使用javascript。

Answer 2

或者你可以使用一个简单的onmouseover html标签，并从bootstrap给它一类img-responsive。

 .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }