根据屏幕分辨率更改内联最小高度

change inline min-height with screen resolution

本文关键字：小高 高度 屏幕 分辨率      更新时间：2023-09-26

在我的网站上，我使用了一个插件，默认情况下，它会发送iframe 的内联最小高度

<iframe id="ec-frame" allowfullscreen="" style="width: 100%;min-height:659px; height:100%;" src="https://dash.evercam.io/live.view.private.widget?camera=stephens-green&amp;refresh=1&amp;api_id=&amp;api_key=&amp;rtmp=rtmp://media.evercam.io:1935/live/stephens-green?token=qoSoGPwrzLlE0ITuMa2Id_VbCGRYYGAfGJlVZVm_LfA6fcVPcHqbymbJQ9uSMSOiyYtl24i4kHr4tIm_fxfadHVNVN8mxVQ_Xps9rGsIssc=&amp;hls=https://media.evercam.io/live/stephens-green/index.m3u8?token=qoSoGPwrzLlE0ITuMa2Id_VbCGRYYGAfGJlVZVm_LfA6fcVPcHqbymbJQ9uSMSOiyYtl24i4kHr4tIm_fxfadHVNVN8mxVQ_Xps9rGsIssc=" frameborder="0" scrolling="no"></iframe>

因此，当屏幕宽度改变时，这个最小高度保持不变，并在iframe和下分区之间造成很大的空间

我正试图用调整大小功能来改变这一点

var currentHeight = $("#test > iframe").css('min-height');
    $(window).on('resize', function () {
      $('#test > iframe').css('min-height', "5px");
    });

但我真的不知道/找不到如何在屏幕宽度变化时编辑动态最小高度，上面的函数只是将最小高度设置为5px，但如果我减去

$('#test > iframe').css('min-height', currentHeight - "5px");

这根本不管用。我想要的是随着屏幕宽度的变化来改变最小高度，因为现在最小高度是659px，我想动态地减去一个值，但不知道如何减去它

您正在从int currentHeight - "5px"中减去string。

你必须做

 $('#test > iframe').css('min-height', parseInt(currentHeight) - 5);

你好，更改如下：

var currentHeight = $("#test > iframe").css('min-height');
    $(window).on('resize', function () {
      $('#test > iframe').css('min-height', $( window ).height());
    });

根据窗口的大小动态工作

感谢

相关文章：