Bootstrap 3 的响应式图像鼠标悬停有解决方案吗?
这是我的代码: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");
}
谢谢!
最佳答案
它将需要更多 HTML 代码,但您可以使用与 http://alistapart.com/article/creating-intrinsic-ratios-for-video/ 相同的基本技术。 。您需要在某处设置宽度(因为背景图像没有固有尺寸),但这可能来自父元素。本质上:
<div class="wrapper-with-intrinsic-ratio"><div class="element-to-stretch"></div></div>
.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://placehold.it/350x150/000/fff");
background-size: cover;
}
.element-to-stretch:hover {
background-image: url("http://placehold.it/350x150/ccc/fff");
}
这是some documentation on background-size 。其次,长宽比可能很棘手:如果比例为 2:1(因此图像的宽度是高度的两倍),则 .wrapper-with- 上的
将为padding-bottom
内在比率50%
。计算公式为(高度 ÷ 宽度)× 100。例如,您的 350×150 像素图像将为 padding-bottom: 42.857%;
,对于 150x350px 则为 233.333%
。
或者,您可以使用两个 img 元素来完成此操作。笨重,但是...
<div>
<img src="normal.jpg" alt="" class="normal"><img src="hover.jpg" alt="" class="hover">
</div>
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。
关于jquery - Bootstrap 3 鼠标悬停图像响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21280342/