幻灯片的最小高度不起作用

Question

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

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

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

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

你有什么想法吗？

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

Answer 2

当您使用 html 图像而不是 background-image时，您根本不需要设置任何高度来使其响应。

我已经从你的 CSS 中删除了所有不必要的东西，并添加了一个带有固定 min-width:800px 的容器以更好地显示滑块。

CSS：

.container {
    width:100%;
    max-width:800px;
    margin:0 auto;
}
.fadein {
    padding:0px;
    margin:0px;
    position:relative;
    padding:0;
    width:100%;
}   
.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%;   
}

和你修改后的FIDDLE

已编辑：非常棒，我完全按照操作员的要求做了（我让滑块响应）并被否决了。如果这个“答案没有用”就足够了，但是...... nvm。 Imo 他应该指定容器需要一个高度，因为下面有内容。

我已将这个 jquery 添加到小提琴中：

$( document ).ready(function() {
    $( ".fadein" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight/3 );
    });
});

因此它将计算fadein 的孩子的高度并将其设置为文档准备好的高度。请注意newHeight/3，因为 3 是父项中子项的数量。如果您添加更多图像，请同时更改此数字。

New fiddle