Question

我是第一次尝试bootstrap而且我正在构建一个滑块。我遇到的问题是主题中的问题，我尝试了我所知道的一切，但旋转木马内的图像似乎完全忽略了它们的父元素的100％和最大高度，而是缩放为自动。 / p>

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>ArtArchive</title>
    <link rel="stylesheet" href="CSS/style.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="CSS/bootstrap.min.css">

    <!-- Latest compiled and minified jQuery -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="Scripts/bootstrap.js"></script>



</head>
<body>
    <div class="slider">
        <div id="myCarousel" class="carousel">

            <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>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="Assets/Images/redSunset.jpg" alt="Sunset 1">
                </div>

                <div class="item">
                    <img src="Assets/Images/oceanSunset.jpg" alt="Sunset 2">
                </div>

                <div class="item">
                    <img src="Assets/Images/mountainSunset.jpg" alt="Sunset 3">
                </div>


            </div>

        </div>
    </div>

</body>
</html>

CSS：

body, html {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0; }

.slider {
  position: absolute;
  background: grey;
  width: 100%;
  height: 45%;
  margin: 0 auto;
  display: inline-block; }

  .slider .carousel {
    width: 100%;
    height: 100%;
    display: inline-block;
    max-height: 100% !important;
    min-height: 100% !important; }

.slider .carousel .carousel-inner {
      position: relative;
      display: inline-block;
      overflow: auto;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 100% !important; }

.slider .carousel .carousel-inner img {
        display: inline-block;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        margin: 0 auto; }

Answer 1

您应该调整图像大小，使其不超过高度。

如果无法做到这一点，您可以让浏览器通过调整宽度和高度来缩放图像。

此代码未经测试

获得最大身高

var maxHeight = window.innerHeight * .45 ;

获取滑块图像

img[1] = document.getElementById("img1");
img[2] = document.getElementById("img2");
img[3] = document.getElementById("img3");

检查图像并根据需要进行缩放。

var height,width;
for (var ndx = 1, ndx<4,ndx++){
  height = img[ndx].height;
  width = img[ndx]width;
  if (height > maxHeight){
    var scale = maxHeight/height;
    width = width * scale;
    height = maxHeight;
  }
  img[ndx].width = width;
  img[ndx].height = height;
}

幻灯片中的图像忽略最大高度，始终具有自动高度

1 个答案: