Question

我已经制作了一个旋转木马，如果图像的宽度大于高度，我希望图像以一维宽度最大化屏幕，反之亦然。

最大高度应该允许标题/导航栏和页脚的空间，我希望它们按比例缩放。目前，它们正在缩放到宽度，但它们在垂直方向上极大地溢出了视口。

HTML：

<div id="frontimages" class="carousel slide" data-ride="carousel">

    <ul class="carousel-indicators">
        <li data-target="#frontimages", data-slide-to="0" class="active"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="url" alt="title">
        </div>
    </div>

    <a class="carousel-control-prev" href="#frontimages" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#frontimages" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

CSS：

.carousel-inner img {
    width: 100%;
    height: 100%;
}

Answer 1

如果您希望每张图片都覆盖整个轮播项目，您可以执行以下操作：

.carousel-item {
  width: 100%;
  height: 300px; /* example */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

或者，使用背景图片，而不是固定高度，您也可以使其响应：

<div class="carousel-item" style="background-image:url('url');"></div>

.carousel-item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel-item:before {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* example */
}

宽高比表：

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

https://stackoverflow.com/a/10441480/483779

Answer 2

这样做的最佳方法如下：

.carousel-inner img { 
    max-width:100%;
    max-height:100%;
    width: auto; 
    height: auto; 
}

通过这种方式，它可以在填充屏幕时保持纵横比。

希望这有帮助！

Answer 3

这是一个现场演示： http://jsbin.com/vewavayexa/edit?output

我建议您将代码复制到本地以检查效果，它们没有配备jsbin元素，有时它无法加载所有图像（如果是这样刷新浏览器）

   <header>
    <h1>Gallery</h1>
  </header>
  <nav><a href="Home">Home</a><a href="">Blog</a><a href="">About</a></nav>
  <div class="gallery">
    <div class="container">
      <img src="https://i.loli.net/2018/03/06/5a9d82e150523.jpg" alt="">
      <img src="https://i.loli.net/2018/03/06/5a9d82e1bd5b0.jpg" alt="">
      <img src="https://i.loli.net/2018/03/06/5a9d82e203fc3.jpg" alt="">
      <img src="https://i.loli.net/2018/03/06/5a9d82e1be833.jpg" alt="">
    </div>
  </div>
  <footer>Copyright</footer>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color:#FFF;
  }
  a:hover {
    background:#B7023F;
  }
  header {
    height: 70px;
    background:#55024A;
    color: #FFF;
  }
  h1 {
    line-height: 70px;
    padding: 0 30px;
  }
  nav {
    background: #E16639;
    padding: 0 15px;
    color: #FFF;
    height: 50px;
  }

  nav a {
    /* height: 50px; */
    /* line-height: 50px; */
    display: inline-block;
    padding: 15px 15px;
  }

  footer {
    height: 70px;
    line-height: 70px;
    background: #AD860A;
    color: #FFF;
    padding: 0 30px;
  }

  img {
    display: block;
    position: absolute;
  }
  .gallery {
    overflow: hidden;
    position: relative;
  }

  .container {
    top: 0;
    left: 0;
    position: absolute;
  }

JS

    const wh = getWH()
    const gallery = document.querySelector('.gallery')
    const container = document.querySelector('.container')
    gallery.style.width = wh.w + 'px'
    gallery.style.height = wh.h + 'px'
    container.style.height = wh.h + 'px'
    let imgs = document.querySelectorAll('img')
    const allImgWidth = []

    container.appendChild(imgs[0].cloneNode(true))
    container.insertBefore(imgs[imgs.length -1].cloneNode(true), imgs[0])

    imgs = document.querySelectorAll('img')
    // set width and height for each images
    Array.prototype.forEach.call(imgs, img => {
      if (parseInt(img.clientWidth) > parseInt(img.clientHeight)) {
        img.style.width = wh.w + 'px'
      } else {
        img.style.height = wh.h + 'px'
      }

      img.style.left = allImgWidth.reduce((a, b) => a + b, 0 )
      allImgWidth.push(img.offsetWidth)
    })
    const totalWidth = allImgWidth.reduce((a, b) => a + b, 0)
    container.style.width = totalWidth + 'px'
    const slideWidth = totalWidth - allImgWidth[allImgWidth.length - 1]
    const step = parseInt(slideWidth / 100)
    let startPoint = container.style.left = -allImgWidth[0]
    // move container, if it got max left, then reset to starting point
    setInterval(() => {
      let x = container.style.left.slice(0, -2) - step
      if (Math.abs(x) >= slideWidth) {
        container.style.left = startPoint
      } else {
        container.style.left = x
      }
    }, 100)

    function getWH() {
      const header = document.querySelector('header')
      const nav = document.querySelector('nav')
      const footer = document.querySelector('footer')
      const offset = header.offsetHeight + nav.offsetHeight + footer.offsetHeight
      return {
        w: window.innerWidth,
        h: document.body.clientHeight - (header.offsetHeight + nav.offsetHeight + footer.offsetHeight)
      }
    }

Answer 4

我仍在学习bootstrap v 4.0.0，但我将代码放在转盘下方的.d-block部分中，它很好地缩放了图像。

.d-block {
  display: block !important;
  /*added this below*/
    width: 100%;
    height: 100%;
    object-fit: cover;
}

如何在旋转木马中缩放图像？

4 个答案: