如何在 Bootstrap - Carousel 中将图像缩放到全高? [英] How to make the image scale to full height in Bootstrap - Carousel?

查看：26
本文介绍了如何在 Bootstrap - Carousel 中将图像缩放到全高?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在 Bootstrap Carousel 控件中显示一个应该填满整个屏幕的图像.我正在使用 1024px*795px 的图像

我正在使用 Bootstrap 站点上给出的带有全尺寸图像的示例.在水平方向上，它很好地填满了屏幕.但在垂直方向上它不能很好地扩展.我应该添加/删除哪些属性以使图像填满整个屏幕，尽管它们的像素尺寸较小?

我怎样才能在响应式设计中做到这一点，以便图像缩放任意大小?

我正在使用示例站点上的 css，并且只更改 carousel.html 中的 CSS.

解决方案

2019 更新 Bootstrap 4.x 的答案

由于现代浏览器现在支持 object-fit，有 此处所述的更好选项.

Bootstrap 3.x 的原始答案

我意识到这个答案有点晚了，但我也面临与 Bootstrap 轮播类似的挑战.为了使 100% 的高度起作用，轮播及其任何父容器也必须是 100% 的高度.

我向 Bootstrap CSS 类添加了一些覆盖:

html,body{height:100%;}.carousel,.item,.active{height:100%;}.carousel-inner{height:100%;}.fill{width:100%;height:100%;background-position:center;background-size:cover;}

然后相应地向您的轮播添加填充"类:

<div id="myCarousel" class="轮播幻灯片"><div class="carousel-inner"><div class="活动项目"><div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');"><div class="容器"><h1 class="pull-left pull-middle light-color"><strong><a href="#">幻灯片 1</a></strong></h1>

<div class="item"><div class="fill" style="background-image:url('//placehold.it/1024x700');"><div class="容器"><h1 class="pull-left pull-middle light-color"><strong><a href="#">幻灯片2</a></strong></h1>

<div class="pull-center"><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

这是一个工作示例:http://bootply.com/59900

I am trying to show an image that should fill up the entire screen in Bootstrap Carousel control. I am using an image with 1024px*795px

I am using the example given on Bootstrap site with full size image. Horizontally, it fills up the screen very well. But vertically it does not scale well. What properties should I add / delete so that the images fill up the entire screen, though they have smaller pixel sizes?

How can I do it in responsive designs as well, so that the images scale any size?

I am using the css as it is on the example site and only changing CSS in carousel.html.

解决方案

2019 Updated Answer for Bootstrap 4.x

Since modern browsers now support object-fit, there are better options as explained here.

Original Answer for Bootstrap 3.x

I realize this answer is a little late, but I also faced a similar challenge with the Bootstrap carousel. In order for the 100% height to work, the carousel and any of its' parent containers must also be 100% height.

I added some overrides to the Bootstrap CSS classes:

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}

And then add the "fill" class accordingly to your carousel:

<div class="container fill">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');">
        <div class="container">
          <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1>

        </div>
      </div>
    </div>
    <div class="item">
      <div class="fill" style="background-image:url('//placehold.it/1024x700');">
        <div class="container">
          <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1>

        </div>
      </div>
    </div>
  </div>
  <div class="pull-center">
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  </div>
</div>
</div>

Here is a working example: http://bootply.com/59900

这篇关于如何在 Bootstrap - Carousel 中将图像缩放到全高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆