Question

我正在尝试创建一个div，它将保持它的宽高比，保持一个不超过屏幕界限的高度和高度。

这是我现在的代码：

<div class="container"></div>

wW=$(window).width();
wH=$(window).height();
wHx=(wW/16)*9;
wWx=(wH/9)*16;
if(wW>wWx){
    vH1=$('.container').height();
    vW1=(vH1/9)*16;
    vP1=($(window).width()-vW1)*0.5;
    $('.container').css('width',vW1+'px');
    $('.container').css('left',vP1+'px');
    $('.container').css('height','100%');
    $('.container').css('top','0');
}
if(wH>wHx){
    vW2=$('.container').width();
    vH2=(vW2/16)*9;
    vP2=($(window).height()-vH2)*0.5;
    $('.container').css('height',vH2+'px');
    $('.container').css('top',vP2+'px');
    $('.container').css('width','100%');
    $('.container').css('left','0');
}

它几乎按预期工作，但在某些随机情况下失败，需要刷新页面才能解决问题。

编辑：在调整大小时执行相同的功能（在调整大小期间的某些随机情况下失败）：

$(window).resize(function(){
    .........
});

Edit2：手动调整窗口大小然后单击浏览器的最小化/最大化按钮后，脚本失败。我在Chrome和Firefox上获得了相同的结果。

Answer 1

这可能会有所帮助

// HTML
<div class="container"></div>

// CSS (SASS)
.container {
  background: red;
  max-width: 100%;

  &:before {
    content: '';
    display: block;
    // for 16/9 this is the height you need
    padding-top: 56.25%;

  }
}

// JavaScript
$(function(){
  $(window).resize(function(){
    var width  = $(window).width(),
        height = $(window).height();

    if (width/height > 16/9) {
      $('.container').css('max-width', height * 16 / 9);
    } else {
      $('.container').css('max-width', '100%');
    }
  })
  // trigger resize so it takes the
  // right size on load
  .trigger('resize');

});

考试http://codepen.io/istavros/full/vxwVoW/

Answer 2

我相信这就是你要找的东西：

<div class="container"></div>
//CSS
.container {
max-width: 100vw;
max-height: 100vh;
}

jquery：保持宽高比并在窗口内包含div

2 个答案: