Question

我想将图像放在非固定的高度容器中。这段代码不起作用，我不明白为什么。

<!DOCTYPE html>
<html>
<head>
  <style rel="stylesheet" type="text/css">
    .wrapper {
      /*height: 50vh;*/
      max-height: 50vh;
      background: #a00;
    }
    .wrapper img {
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <img src="http://www.nasa.gov/sites/default/files/thumbnails/image/7395_saturn_gill_infrared.jpg">
  </div>
</body>
</html>

取消注释height: 50vh;时会得到预期的结果，但我不想修正高度。

有什么想法吗？

更新：我为什么要这样做？

真实世界的例子是幻灯片下方的图片滑块（不是覆盖它们，而是在外面）。如果用户使用的视口高度小于滑块的默认高度，那么我希望用户能够在视口中看到整个幻灯片和分页项目符号。

幻灯片（图片）是内容，而不是样式元素。因此，基于css背景的解决方案并不是我想要的。

Answer 1

你需要将图像作为像这样的div或容器的背景

<div id='box'>
    <div id='image'></div>
</div>

html, body {
    width: 100;
    height: 100%;
}
#box {
    width: 90%;
    height: 90%;
    background: #eee;
}
#image {
    background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg);
    background-size: 500px;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
}

您看到图像具有固定高度，容器可以具有基于％的宽度或高度变量。

Answer 2

请勿使用包装器强制执行高度。而是直接在CSS中为max-height标记设置<img>。我在下面添加了一个带滑块的片段（我没有包含幻灯片分页按钮的功能）：

(function() {
  var sliderItemIdx = 0;

  setInterval(function() {
    var allSliderItemEls = document.querySelectorAll('.slider > .slider-item');
    var activeSliderItemEls = document.querySelectorAll('.slider > .slider-item.active');

    // Update the current item index
    sliderItemIdx = (sliderItemIdx + 1) % allSliderItemEls.length;

    // Remove active class
    [].forEach.call(activeSliderItemEls, function(sliderItemEl) {
      sliderItemEl.classList.remove('active');
    });

    // Add active to current item
    allSliderItemEls[sliderItemIdx].classList.add('active');

  }, 2000);

})();

html, body { margin: 0px; padding: 0px; }

.slider {
  background: #a00;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

.slider-item {
  position: absolute;
  left: 100%;
}

.slider-item.active {
  position: relative;
  left: 0%;
  margin: 0px;
}

.slider-item img { max-height: calc(50vh - 30px); }
.pagination { line-height: 30px; }
.pagination > .page { text-decoration: none; font-size: 2.5em; }
.pagination > .page::before { content: '\2022'; }

<div class="slider">
  <figure class="slider-item active">
    <img src="https://i.stack.imgur.com/memI0.png">
  </figure>
  <figure class="slider-item">
    <img src="https://i.stack.imgur.com/P59NF.png">
  </figure>
  <figure class="slider-item">
    <img src="https://i.stack.imgur.com/OVOg3.jpg">
  </figure>
  <div class="pagination">
    <a class="page" href="#item-1" title="Item 1"></a>
    <a class="page" href="#item-2" title="Item 2"></a>
    <a class="page" href="#item-3" title="Item 3"></a>
  </div>
</div>

请注意，我使用calc来允许分页符合它。

如何将图像放入非固定高度的容器中？

2 个答案: