时间戳

首页 > 解决方案 > 如何适合轮播图像？(HTML/CSS/Bootstrap4)

html - 如何适合轮播图像？(HTML/CSS/Bootstrap4)

问题描述

我是 HTML、CSS 和 Bootstrap 方面的新手，我正在尝试为我的页面创建一个轮播。

轮播正在运行，但图像不适合页面。尺寸太大（高度和宽度），我正在尝试调整尺寸，但无法正常工作。

我的代码是：

.carousel-inner img{
 width:100%;
 height: 40%;
}
.carousel-caption {
  position: absolute;
 top: 60%;
  transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
  color:  #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}
<!-- Image slider -->
    <div id="slides"  class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
  <li data-target= "#slides" data-slide-to= "0" class="active"></li>
    <li data-target= "#slides" data-slide-to= "1"></li>
      <li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
   <div class="carousel-item active">
  <img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
  <div class="carousel-caption">
    <h1 class="display-2"> Have you ever tried?</h1>
    <h3> Discover the authentic flavour</h3>
    <br>
  <button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
  </div>
    </div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">
</div>
</div>

第一个是 CSS（我使用的是 CSS 3），第二个是 HTML。我也在使用 Bootstrap 4。

有谁知道我错过了什么或做错了什么？或者我怎样才能改变尺寸以适应旋转木马？请。

标签： htmlcssbootstrap-4carousel

解决方案

据我所知使用

    .carousel-inner img{
       max-width:100%;
       height: auto;
       display: block;
    }

而不是使用

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

如果你想要绝对高度，你可以指定高度：300px

    .carousel-inner img{
     max-width:100%;
     height: 300px;
     object-fit: cover;
object-position: center;
    }

推荐阅读