Question

我正在尝试重新创建导航栏/标题/滑块，例如
但是，我的轮播滑块图像有问题。当它处于网页形式时，它看起来不错，但是当我将其缩小为移动形式时，我的图像不会调整为与轮播滑块相同的大小。下面是我的意思的图片。

https://matchthemes.com/demohtml/dina/index.html

这是我用于轮播滑块的HTML

         <section class="container-fluid carouselcontainer"> 
            <section id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <section class="carousel-inner">
                <section class="item active">
                  <img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
                </section>

                <section class="item">
                  <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
                </section>

                <section class="item">
                  <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
                </section>
              </section>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </section>
        </section>

这是我的CSS。只有1行。这是我知道调整轮播和图片大小的唯一方法

.carousel-inner {
width:100%;
height:830px;
}

Answer 1

这是您的解决方案

 /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 


<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

您也可以Code Link在此处编辑或预览代码

Answer 2

您可以在背景中使用带有“ background-image:url('..');”的图片，例如

<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>

您需要在项目类中添加一些CSS才能调整所需的图像。

示例

.item{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat ;  
  background-size: cover ;
  background-position: center ;
}

Answer 3

让浏览器拍摄最佳图像怎么样？

img {
  max-width: 100%;
}

并阅读以下链接

https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html

并使用“ img srcset”

Answer 4

尝试将轮播图片的宽度设置为100％

.carousel-inner .item img {
      width: 100%;
}

如何使我的旋转木马滑块图像响应

4 个答案: