固定图像尺寸/幻灯片_JavaScript

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

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

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

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

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

我希望这可以帮助你。

您无法执行此操作，除非您想拉伸图像（更改宽高比），我认为这是一个坏主意。

如果您观看它们使用的是固定宽度并保持图像的长宽比，因此高度是可变的...这意味着，如果图像太短，则广告顶部和底部都会有空白图片...

固定图像尺寸/幻灯片

问题描述

1楼

2楼