twitter-bootstrap Bootstrap 3 鼠标悬停图像响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21280342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 mouseover image responsive
提问by l00per
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!
谢谢！
回答by Olly Hodgson
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:
它将需要更多的 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");
}
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-bottomon .wrapper-with-intrinsic-ratiowould 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%.
这里有一些关于 background-size 的文档。其次，纵横比可能很棘手：如果比例为 2:1（因此图像的宽度是高度的两倍），那么padding-bottomon.wrapper-with-intrinsic-ratio将是50%. 与（高度÷宽度）×100。因此，例如，你的350×150像素的图像会做出来padding-bottom: 42.857%;，并为150x350px it'd be 233.333%。
Alternatively, you could do it with two img elements. Clunky, but...
或者，您可以使用两个 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; }
Or you could use javascript.
或者你可以使用javascript。
回答by Zach McKimmins
Or you could just use a simple onmouseover html tag & give it a class of img-responsive from bootstrap.
或者你可以只使用一个简单的 onmouseover html 标签并从引导程序中给它一个 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;
}<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>