Question

这是来自w3schools的一个轮播示例。

<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="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </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>

为了使轮播响应，我在CSS中添加了以下内容：

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block !important;
}

在我的网站中，我有几张具有相同尺寸（高度300像素和宽度600像素）的图像，但只有其中一个具有高度300像素和宽度300像素）。因此，在CSS中，我设置了：

.carousel-item>img{
    max-height: 300px;
}

这样，当图像在轮播中滑动时，它们具有相同的高度。

但是当我调整页面大小或在较小尺寸的设备上打开页面时，由于轮播响应，因此高度会降低。但是，对于300像素宽的图像，高度较小，而对于600像素宽的图像，高度较大。因此，当轮播幻灯片滑动图像时，到达300x300图像时高度会增加，而到达600x600图像时高度会降低。

如何使轮播的高度在所有图像，所有尺寸上都相似？

Answer 1

一个对我来说很好的解决方案是为媒体查询设置最大高度。例如：

@media (max-width: 688px) {
    .carousel-item>img {
        max-height: 146px;
    }
}

要获取最大高度值，我引用了inspect元素。

Answer 2

我发现解决此问题的最佳方法（使图像适合所有屏幕尺寸）是确保将所有图像裁剪为相同尺寸。

我使用了此在线工具# This file is generated by /usr/bin/cloudera-quickstart-ip, which is invoked # by /etc/init.d/cloudera-quickstart-init. If you wish to change the way that # /etc/hosts is generated, you may edit /etc/init.d/cloudera-quickstart-init # and hard-code a different IP address as a parameter to # /usr/bin/cloudera-quickstart-ip, or you may comment out that line and manage # /etc/hosts yourself. #127.0.0.1 quickstart.cloudera quickstart localhost localhost.domain 192.168.2.110 quickstart.cloudera quickstart 127.0.0.1 localhost loclahost.domain。

通过选择裁剪图标，然后选择长宽比并裁剪为https://pixlr.com/editor/来裁剪图像。

这为我解决了问题。

bootstrap 4旋转木马的高度相同，可用于不同的图像尺寸和屏幕尺寸

2 个答案: