javascript - 修复图像尺寸/幻灯片

Question

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

这是我的 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。

希望对你有帮助