[英]Bootstrap 3 mouseover image responsive
Is there any solution for responsive image mouseover for Bootstrap 3? 对于Bootstrap 3,有什么解决方案可以响应图像鼠标悬停吗?
Here is my code: http://jsfiddle.net/4gac7/ 这是我的代码: 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");
}
Thank you! 谢谢!
It will need more HTML code, but you can use the same basic technique as http://alistapart.com/article/creating-intrinsic-ratios-for-video/ . 它将需要更多的HTML代码,但是您可以使用与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");
}
Here's some documentation on background-size . 这是有关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%
. 其次,长宽比可能很棘手:如果长宽比为2:1(因此图像的宽度是高的两倍),则
.wrapper-with-intrinsic-ratio
上的padding-bottom
将为50%
。 Work it out with (height ÷ width) × 100. So for example your 350×150px image would be padding-bottom: 42.857%;
用(高度÷宽度)×100进行计算。因此,例如,您的350×150px图像
padding-bottom: 42.857%;
为padding-bottom: 42.857%;
and for a 150x350px it'd be 233.333%
. 而对于
150x350px it'd be 233.333%
。
Alternatively, you could do it with two img elements. 或者,您可以使用两个img元素来完成此操作。 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; }
Or you could use javascript. 或者您可以使用javascript。
Or you could just use a simple onmouseover html tag & give it a class of img-responsive from bootstrap. 或者,您可以只使用一个简单的onmouseover html标记,并从引导程序中为其提供一类img响应。
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
<div class="col-lg-6"> <img src="http://placehold.it/350x150/000/fff" onmouseover="this.src='http://placehold.it/350x150/ccc/fff'" onmouseout="this.src='http://placehold.it/350x150/000/fff'" class="img-responsive"> </div>
http://jsfiddle.net/McKmillions/7t63cja2/ http://jsfiddle.net/McKmillions/7t63cja2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.