Question

我正在使用脚本来缩放Div以保持宽高比。目标是在尽可能大的同时保持100％的DIV可见。如果您将浏览器扩展得非常宽，则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>

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

1 个答案: