如何使 Bootstrap v5.0 Carousel slider all images 等高

问题描述 投票：0回答：2

我正在尝试使用 Bootstrap v5.0 Carousel 创建一个滑块。我对滑块图像有一些疑问。图片的高度不相等。看起来滑块很丑。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carousel</title>
</head>

<body>
    <div class="bg-light">
        <div class="container">
            <div class="carousel slide" id="carousel1" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./images/slider 00.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/slider 01.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/slider 02.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="./images/slider 03.jpg" class="d-block w-100 h-100">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide=
                prev>
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide=
                next>
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
</body>

</html>

我怎样才能让它们都一样高？

我尝试使用 CSS img 高度 

height: x px;
但它看起来很难看。我该如何解决这个问题？

html css twitter-bootstrap carousel
2个回答
2
投票

您可以在此选择器中使用固定高度

.carousel-inner div

.carousel-inner div {
    height: 400px;
    object-fit: cover;

}


.carousel-inner div {
    height: 400px;
    object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carousel</title>
</head>

<body>
    <div class="bg-light">
        <div class="container">
            <div class="carousel slide" id="carousel1" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" class="d-block w-100 h-100">
                    </div>
                    <div class="carousel-item">
                        <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" class="d-block w-100 h-100">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide=
                prev>
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide=
                next>
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
</body>

</html>

0
投票

由于一次只显示两张幻灯片，javascript 解决方案不可避免地需要切换显示以读出图像尺寸，这很可能会导致回流。那么，为什么不寻求服务器端解决方案呢？当然，您也可以将相同的模式应用于客户端逻辑。

所以，想法是确定最高图像的纵横比，然后将其应用于所有项目。通过将宽高比应用于 svg 并将其包装在显示网格容器中，可以实现自然调整大小。

这是在 wordpress 上下文中的一个实现：

<?php
  global $wp_query;

  $max = array_reduce($wp_query->posts, function($result, $post) use ($size) {
    list($src, $width, $height) = wp_get_attachment_image_src($post->ID, $size, false);

    if ($width * $height > $result['width'] * $result['height']) {
      $result['width'] = $width;
      $result['height'] = $height;
    }

    return $result;
  }, [
    'width' => 0,
    'height' => 0
  ]);

  $greatestCommonDivisor = static function($width, $height) use (&$greatestCommonDivisor) {
    return ($width % $height) ? $greatestCommonDivisor($height, $width % $height) : $height;
  };

  $divisor = $greatestCommonDivisor($max['width'], $max['height']);

  $ratio_x = $max['width'] / $divisor;
  $ratio_y = $max['height'] / $divisor;
?>
<div
  id="<?= $id ?>-carousel"
  <?php if (get_theme_mod('carousel_colorscheme') !== 'dark'): ?>
    data-bs-theme="dark"
  <?php endif; ?>
  class="carousel slide h-100"
  data-bs-ride="false"
  data-bs-interval="<?= !$autoplay ? 'false' : $interval; ?>"
>
  <div class="carousel-indicators" data-control>
    <?php while( have_posts()) : the_post() ?>
      <button
        data-bs-target="#<?= $id ?>-carousel"
        data-bs-slide-to="<?= $wp_query->current_post; ?>"
        class="<?= $wp_query->current_post === 0 ? 'active' : '' ?>"
      ></button>
    <?php endwhile; ?>
  </div>
  <div class="carousel-inner h-100">
    <?php while( have_posts()) : the_post() ?>
      <div class="carousel-item h-100<?= $wp_query->current_post === 0 ? ' active' : '' ?>">
        <div style="display: grid;">
          <svg viewBox="0 0 <?= $ratio_x ?> <?= $ratio_y ?>" style="grid-area: 1 / 1 / 2 / 2;"></svg>
          <div class="w-100 h-100" style="grid-area: 1 / 1 / 2 / 2;">
            <?= wp_get_attachment_image($post->ID, $size, false, [
              'class' => "img-fluid m-0 w-100 h-100",
              'style' => "object-fit: contain; object-position: center",
              'loading' => 'lazy'
            ]); ?>
            <?php if ($caption = wp_get_attachment_caption()): ?>
              <div class="carousel-caption d-none">
                <?= $caption ?>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>
    <?php endwhile; ?>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#<?= $id ?>-carousel" data-bs-slide="prev" data-control>
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#<?= $id ?>-carousel" data-bs-slide="next" data-control>
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.