jQuery bootstrap 如何使固定高度响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25980576/
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 how to make a fixed height responsive?
提问by laukok
How can I make a fixed height element responsive with bootstrap 3? For instance I set the carousal's height at 650px. But I can't make it responsive like the images do. Any idea?
如何使用 bootstrap 3 使固定高度元素响应？例如，我将 carousal 的高度设置为 650px。但我不能让它像图像那样响应。任何的想法？
css,
css,
#article-carousel .carousel-inner{
height:650px;
}
html,
html,
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
</div>
....
回答by dizel3d
You can use css3 object-fitfor resizing your image http://jsfiddle.net/xcoq9xxg/
您可以使用 css3 object-fit调整图像大小http://jsfiddle.net/xcoq9xxg/
img {
height: 650px;
width: 100%;
object-fit: cover; // here
}
It works for Chrome and Opera. Use polyfill library for others: https://github.com/schmidsi/jquery-object-fitor https://github.com/anselmh/object-fit.
它适用于 Chrome 和 Opera。为其他人使用 polyfill 库：https: //github.com/schmidsi/jquery-object-fit或https://github.com/anselmh/object-fit。
Another way is to use css3 background-sizehttp://jsfiddle.net/dizel3d/rwdspudv/
另一种方法是使用 css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/
.image {
height: 650px;
background-position: center;
background-size: cover;
}
It works in all modern browsers without javascript, but you need to use <div>instead of <img>:
它适用于所有没有 javascript 的现代浏览器，但您需要使用<div>而不是<img>：
<div class="image" style="background-image: url('my-image.jpg')"></div>
回答by Nadine Fisch
i had the same problem with the responsive fixed height. I use vh instead of px. In my case it works like a charm
我对响应式固定高度有同样的问题。我使用 vh 而不是 px。在我的情况下，它就像一个魅力
img {
height: 85vh;
width: 100%;
object-fit: cover; // here
}
回答by user1370510
Try below this worked just fine for me
试试下面这对我来说很好用
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 500px;
height: 350px;
}
.carousel
{
height: 350px;
width: 500px
}
</style>回答by pirs
Try :
尝试 ：
.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }
or, I think thats better to do it with js ( with boostrap we'll use jquery ) :
或者，我认为最好使用 js（使用 boostrap 我们将使用 jquery）：
...
function init_carousel(){
H = +($( window ).height()); // or $('.carousel-inner') as you want ...
$('.img-responsive').css('height',H+'px');
}
init_carousel();
...
In this case, add div with the background image into, and your css must be :
在这种情况下，将带有背景图像的 div 添加到其中，并且您的 css 必须是：
.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; }
.carousel-inner > item > .img-responsive { witdh:auto; }
回答by Ashish
function Screensize() {
try {
var height = ((screen.height * 80) / 100);
document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;");
}
catch (ex)
{ alert(ex); }
}
回答by Majali
you will need to restyle carousel-control class with media query here is just an example code to add
您将需要使用媒体查询重新设计 carousel-control 类的样式，这里只是要添加的示例代码
@media (max-width: 800px) {
.carousel-control{
height:350px;
}
}
