0

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

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

我尝试过使用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/

4

2 回答 2

0

当您使用 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 是父级中的子级数。如果您添加更多图像，请同时更改此数字。

新小提琴

于 2015-04-29T08:56:50.260 回答
0

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

您可以在此小提琴上看到结果，调用该函数一次以在窗口加载时更改高度，然后$(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

于 2015-04-29T09:03:57.550 回答