Question

我需要在视图中以幻灯片形式显示一些图像。每个图像都有不同的尺寸。这些不同的尺寸使幻灯片显示变得怪异。是否有可能将图像尺寸更改为一个固定尺寸。我希望我能清楚地解释我的问题，请原谅。预先感谢。

这是我的HTML代码。

<div 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 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZW..." alt="image1">
    </div>

    <div class="item">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZWNobm..." alt="image2">
    </div>

    <div class="item">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZWN..." alt="image3">
    </div>
  </div>

  <!-- 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>
</div>

Answer 1

将这行代码添加到样式表文件中

.slideshow img { height: 380px;width: 100%}

然后将“ slideshow”类添加到包含幻灯片图像和项目的div中。

希望对您有帮助。

Answer 2

除非您想拉伸图像（更改宽高比），否则您将无法执行此操作，在我看来这是个坏主意。

如果您查看this ad on Etsy，它们使用的是固定宽度并保持图像的长宽比，因此高度是可变的...这意味着如果图像太短，则顶部会出现空白以及图片的底部...

固定图像尺寸/幻灯片

2 个答案: