Question

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

但是我想创建一个响应式网页，并根据页面的宽度使幻灯片高度变量。

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

我尝试将容器的height放在400px上，图像高度放在auto上，这部分解决了问题，因为幻灯片的高度响应变化但容器停留在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

当您使用background-image的html图片时，您根本不需要设置任何高度以使其响应。

我已从您的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

编辑：非常棒，我完全按照操作的要求（我让滑块响应）并投降了。如果这个答案没有用，那就足够好了＃34;但是...... nvm。 Imo他应该指定容器需要一个高度，因为下面的内容是goign。

我在这个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

Answer 2

您需要一些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

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

2 个答案: