Bootstrap 3 mouseover图像响应 [英] Bootstrap 3 mouseover image responsive
问题描述
对于Bootstrap 3的响应式图像鼠标悬停是否有任何解决方案?
Is there any solution for responsive image mouseover for 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/ 。您需要在某处设置宽度(因为背景图像没有内部尺寸),但这可能来自父元素。基本上:
It will need more HTML code, but you can use the same basic technique as http://alistapart.com/article/creating-intrinsic-ratios-for-video/. You will need to set a width somewhere (because background images don't have intrinsic dimensions), but that could come from a parent element. Essentially:
<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");
}
这是一些关于背景大小的文档。其次,宽高比可能很棘手:如果比例为2:1(因此图像的宽度是它的两倍),那么 padding-bottom
on .wrapper-with-intrinsic-ratio
将 50%
。使用(高度÷宽度)×100进行处理。例如,您的350×150px图像将是 padding-bottom:42.857%;
和 150x350px它是233.333%
。
Here's some documentation on background-size. Secondly, the aspect ratio can be tricky: If the ratio is 2:1 (so the image is twice as wide as it is tall) then the padding-bottom
on .wrapper-with-intrinsic-ratio
would be 50%
. Work it out with (height ÷ width) × 100. So for example your 350×150px image would be padding-bottom: 42.857%;
and for a 150x350px it'd be 233.333%
.
或者,您可以使用两个img元素。 Clunky,但是......
Alternatively, you could do it with two img elements. Clunky, but...
<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。
Or you could use javascript.
这篇关于Bootstrap 3 mouseover图像响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!