html - 具有固定高度的响应式 div 层

Question

如何将 div 层设置为具有以像素为单位的固定高度，但同时该高度在较小的分辨率下响应？

假设 div 的高度是:

HTML

<div id="size"></div>

CSS

#size {

height:500px;

}

如果我将高度设置为 100%，它会调整大小并且会响应。那么为什么我需要它具有固定大小并同时响应，因为我将它用于过渡元素的高度一旦单击就会发生在这个 div 上。所以我想看看这个问题是否有解决方案。

这是一个 FIDDLe 示例:http://jsfiddle.net/vladicorp/frNf5/

现在的风格:

#index_slider
{
  width:100%;
  position: relative;
  overflow:hidden;
  float: left; 
  transition:all 1s ease;
  height:430px;

}

具有固定大小，它没有响应，但如果我将它设置为 100% 高度，它会响应，但我正在使用过渡效果。就是这个问题

Answer 1

您可以将 height 属性与 min-height 结合使用:

#size {
    height:100%;
    min-height:500px;
}

这将使您的元素在达到 500 像素高度时停止缩小。

您还可以将 height 样式与 max-height 样式结合使用:

#size {
    height:500px;
    max-height:100%;
}

这将使它的高度固定为 500 像素，但如果容器的大小调整到小于 500 像素，它会自动开始调整大小。