javascript - 缩放 DIV 保持纵横比 - 在 Firefox 中不起作用

Question

我正在使用脚本来缩放 Div 并保持纵横比。目标是保持 DIV 100% 可见，同时使其尽可能大。如果您将浏览器缩放得很宽，则 div 具有 100% 的高度，如果您将浏览器缩放得很高，则它具有 100% 的宽度。我相信你明白我的意思。

我目前正在使用 javascript/jquery 来检测这一点并更改一些 CSS 值:

"position": "fixed",
"-webkit-transform": "translateZ(0)",
"-ms-transform": "translateZ(0)",
"zoom": (scaleY * 100) + "%"

您可以在这里查看:

jsfiddle

var scaleX = 0;
var scaleY = 0;
var a = 1;


function fillDiv(div) {

    div.parent().css({
        "left": "auto"
    });

    currentWidth = div.width();
    scaleX = $(window).width() / currentWidth;

    currentHeight = div.height();
    scaleY = $(window).height() / currentHeight;

    if (($(window).height() / currentHeight) * currentWidth <= $(window).width()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleY * 100) + "%"
        });
    } else if (($(window).width() / currentWidth) * currentHeight <= $(window).height()) {
        div.css({
            "position": "fixed",
            "-webkit-transform": "translateZ(0)",
            "-ms-transform": "translateZ(0)",
            "zoom": (scaleX * 100) + "%"
        });
    }
}

$(document).ready(function() {
    fillDiv($("#content"));
});

$(window).bind("resize", function() {
    fillDiv($("#content"));
});

* {
  margin: 0;
  padding: 0;
}
.content {
    background-color: #dd0000;
    width: 300px;
    height: 600px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="content" id="content">
  </div>
</div>

自最新更新以来，Firefox 不再支持它。任何其他浏览器似乎都可以正常工作。我还找不到解决方案，因为我不知道从哪里开始。也许有一个更简单的纯 CSS 解决方案。

非常感谢任何帮助。

Answer 1

这样的东西有效吗？

$(window).resize(function() {
  $(".content").each(function() {
    var elementHeight = $(this).outerHeight();
    var windowHeight = $(window).innerHeight();
    $(this).css("transform", "scale(" + (windowHeight / elementHeight) + ")");
  });
});
$(window).resize();

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 300px;
  height: 500px;
  background: ghostwhite;
  transform-origin: top left;
  ms-transform-origin: top left;
  moz-transform-origin: top left;  
  webkit-transform-origin: top left;
}

.content * {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
  <div class="content" id="content">
    <h1>Cupcake ipsum dolor sit amet</h1>
    <img src="http://placehold.it/350x150">
    <p>
      Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit tiramisu
      sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.
    </p>
  </div>
</div>