Question

我似乎无法得到这个。我有一个590px屏幕宽度的媒体查询，有一个这个CSS的div

#slider {
width:100%;
height:250px;
background-color:#FF0000;

然而，现在我想让高度调整更小（从250px），因为你不断减小屏幕宽度（使用响应式设计）。自动，100％赢得了工作，因为我需要指定250px的起始高度;和最大高度什么都不做。

Answer 1

您可以使用jQuery轻松地将窗口宽度存储在变量中，然后将此变量应用于元素的高度：

function changeHeight() {
    var width = $(window).width();
    $("div").css({
        "height": width
    });
}
window.addEventListener('resize', changeHeight);
changeHeight();

由于此javascript代码使用CSS更改了元素的高度，因此您甚至可以应用CSS transition来使动画更流畅。

JSFiddle

JSFiddle Demo using CSS transitions

Answer 2

您必须放置两个CSS属性

max-height:250px;
height:100%;

Answer 3

有一个可怕的，可怕的黑客做到这一点。但它通常比使用JavaScript调整元素的大小更顺畅。

利用填充值（事件垂直值）始终相对于容器宽度这一事实。设置一个带有百分比值的padding-top（您必须自己计算，因为您没有在滑块元素本身上指定您考虑的内容和＃34;正常的屏幕宽度＆＃34;），或者，如果这会使事情变得混乱，请在其中添加一个额外的元素并在其上设置填充。这当然会推动所有正常的流量内容，所以你必须将它们绝对放在魔法填充div的顶部。

另外，除非您绝对定位，否则{block}元素上的width: 100%可能对您的情况没有任何帮助。

根据窗口宽度自动调整div高度

3 个答案: