具有修复高度的响应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;
}

这将使你的元素在达到500px高度时停止调整大小。

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

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

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

Answer 2

您可以使用

@media only screen and (max-width: 980px), only screen and (max-device-width: 980px) {
    /*
    PLACE CSS HERE
    */
}

根据设备尺寸选择您想要的最大宽度。这将根据屏幕像素的大小更改CSS。 （或者如果你调整窗口大小）