Question

我想让旋转木马中的img响应。高度应为100vh，但宽度需要尽可能宽，具体取决于img的大小。应该隐藏溢出的部分。现在，当屏幕变小时，img的大小不会按比例调整。这是一些屏幕截图

这适用于全宽，桌面版

这是关于平板电脑的问题，但底部有一些我不想要的空白区域。

这是手机版，已调整大小但未按比例缩放。它也应占用整个窗口，但可以隐藏溢出的宽度。

这就是我对css的所作所为：

＆＃13;

.carousel,
.carousel-inner {
     height: 100vh;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100vw;
  height: 100vh;
  max-width: none;
}

＆＃13;

<div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2875.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/IMG_1824.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2955.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/IMG_3913.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2957.JPG" alt="...">
                        </div>

                    </div> <!-- CAROUSEL-INNER -->

＆＃13;

Answer 1

有一个更好，更简单的做法。将所有轮播代码保存在一行中的引导列中（网格系统）并在我的示例中提供一些类名称，例如 .carousel-column ，然后做两件事。

1.根据您的意愿在自定义css文件中设置一些高度和宽度。 2.在您的代码中为轮播项目的邮件HTML页面设置 img-responsive 。

它对我有用，希望它适用于所有人。

HTML CODE:
<!-- Carousel to highlight main services-->
    <div class="row">
        <div class="col-md-9 carousel-column">
    <div id="myCarousel" class="carousel slide">
        <!-- 1.Carousel Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" class="active" data-
slideto="0</li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 2.carousel Items (Picture plus data)-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/book2.jpg" class="img-responsive img-cus" >
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Web Development</h1>
                        <h3>Let's begin development.It really is about who you are and what you can do</h3>
                        <p><a class="btn btn-primary btn-large" href="signup.html">Sign Up</a></p>
                    </div>
                </div>
            </div>

            <div class="item">
                <img src="images/book.jpg" class="img-responsive img-cus">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Twitter Bootstrap</h1>
                        <h3>A HTML,CSS,Javascript library for responsive 
mobile first web development</h3>
                        <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p>
                    </div>
                </div>
            </div>

            <div class="item">
                <img src="images/coffee.jpg" class="img-responsive img-cus" 
>
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Java Tutorials</h1>
                        <h3>A powerful secure server side object oriented 
programming language</h3>
                        <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Now We will create the carousel controls-->
        <a href="#myCarousel" class="left carousel-control" data-
slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a href="#myCarousel" class="right carousel-control" data-
slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
        </div>
    </div>

现在在CSS文件中执行此操作

    CSS Styling:
      .carousel-column{
        height:500px;
        width:900px;
        margin:0 auto;
      }

Answer 2

如果您使用的是img src="..."，请使用class="img-responsive"和css width="100%"。

Answer 3

试试这个：

检查演示here

HTML：

.carousel,
.carousel-inner {
  height: 100vh;
}

.item {
  border: 1px solid grey;
  max-height: 100vh;
  min-height: 100vh;
  max-width: 100vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

CSS：

glob(".*")

Answer 4

需要更改img css，请检查

.carousel,
.carousel-inner {
     height: 100vh;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: auto;
  max-width: 100%;
}

<div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2875.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/IMG_1824.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2955.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/IMG_3913.JPG" alt="...">
                        </div>
                        <div class="item">
                            <img src="photos/JO2_2957.JPG" alt="...">
                        </div>

                    </div> <!-- CAROUSEL-INNER -->

Answer 5

.carousel img {
 position: absolute;
 top: 0;
 left: 0;
 min-width: 100vw;
 height: 100vh;
 max-width: none;
 object-fit:cover;
 object-position:center;
}

请替换您的CSS代码。

Answer 6

它像这样

<div class="carousel-item activo">
  <a href="#" style="display: block; width: 100%; height: 100%;">
    <img class="img-fluid d-block w-100" src="01.jpg" alt="Alternate Text" />
  </a>
</div>

Bootstrap轮播响应式img

6 个答案: