css - 幻灯片放映的最小高度不起作用

Question

我在页面顶部的幻灯片具有 width:100% 和 height:400px css 属性。

但我想制作一个响应式网页，并根据页面宽度使幻灯片高度可变。

我试过使用 min-height 但它不起作用。

我尝试将容器的 height 设置为 400px 并将图像高度设置为 auto，这部分解决了问题，因为幻灯片的高度会响应地变化，但容器保持在 400px 在 slider 和菜单栏之间留出空白。

你有什么想法吗？

我的CSS如下:

.container { 
    padding:0px; 
    margin:0px; 
    position:relative; 
    padding:0; 
    height:400px; 
}

.img { 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:400px; 
    min-height:auto; 
}

http://jsfiddle.net/maaah1/cm11jpjb/

Answer 1

您需要一些 JavaScript 来使容器高度适应其中的绝对元素。

你可以在this fiddle上看到结果，在窗口加载时调用该函数一次以更改高度，然后使用 $(window).resize(changeHeight); 每次调整窗口大小时更改它

$(function() {
  $('.fadein img:gt(0)').hide();
  setInterval(function() {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
  }, 3000);
});

function changeHeight() {
  var biggestHeight = "0";
  // Loop through elements children to find & set the biggest height
  $(".fadein *").each(function() {
    // If this elements height is bigger than the biggestHeight
    if ($(this).height() > biggestHeight) {
      // Set the biggestHeight to this Height
      biggestHeight = $(this).height();
    }
  });

  // Set the container height
  $(".fadein").height(biggestHeight);
}
changeHeight();
$(window).resize(changeHeight);

.fadein {
  padding: 0px;
  margin: 0px;
  position: relative;
  padding: 0;
}
.fadein img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="fadein">
  <img src="http://i.imgur.com/FGLGf6M.png" align="middle">
  <img src="http://i.imgur.com/WPo9fHR.jpg" align="middle">
  <img src="http://i.imgur.com/IHIUS1K.png" align="middle">
</div>I'm a text