Question

我正在尝试在响应式设计上保持完美尺度的元素。因此宽度应为100％，高度应为宽度的56％。

但是，如果窗户的尺寸发生变化，窗户的高度减小，宽度应按比例减小，以保持比例。

同样，如果窗口的宽度变得更窄，那么我们也希望宽度也按比例调整。

元素的宽度取决于窗口的宽度。

<div id="intro_cont">

<div id="video_cont">
    <div id="text_cont">
        <p id="intro_text" class="intro_text">Looking For Reliable, Accurate Measurement Equipment?</p>
        <p id="intro_text2" class="intro_text">We Can Help You</p>
        <div id="play_cont">
            <div id="play_button"></div>
        </div>          
    </div>
    <div id="intro_video">
        <iframe id="video_iframe" src="//www.youtube.com/embed/#t=0s" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

$(window).resize(function(){
    dimension = 0.56;
    cont_width = $('#video_cont').width();
    cont_height = $('#video_cont').height();
    video_width = cont_width;
    video_height = video_width * dimension;
    if(video_height < video_width * dimension) {
        video_height = video_width * dimension;
    }

    $('#video_iframe').css({'width':video_width,'height':video_height});
});

此代码适用于调整宽度时，但当高度发生变化时，元素不会缩放。

Answer 1

这是一个有根据的猜测，但你可能只是限制video_height，而width仍然是一个独立的参数。尝试添加此代码块以与其他if语句一起使用：

if(video_width > video_height / dimension) {
    video_width = video_height / dimension;
}

Answer 2

在您的代码中，您已将帧基础的高度设置为屏幕宽度。您需要在屏幕宽度固定时检查窗口高度变化。

以下是检查窗口高度变化并调整视频帧大小的示例代码。你可以检查它，但我认为这不是你想要的。但你可以先看看它。

if(video_height < video_width * dimension) {
    video_height = video_width * dimension;
} else if ($(window).height() < 364){
    video_height = $(window).height() - $('text_cont').height();
    video_width = (video_height / dimension);
}

在不同的窗口大小上维护元素的比例

2 个答案: