HTML 调整大小 Div 为 Javascript

Question

我正在开发在线演示文稿编辑器。

我有一个 div（应该是幻灯片 - 格式是 16x9）

如果用户决定将其导出为 pdf，div 应将其调整为 1920x1080，然后再导出（这样 pdf 与用户 window 的大小不同, 但始终是 1920 x 10800。我的问题是，如果我在 JS 中设置宽度是这样的：

$('#content').css('min-width', `1920px`);
$('#content').css('min-height', `1080px`);

$('#content').css('width', `1920px`);
$('#content').css('height', `1080px`);

只有容器会调整大小，但内容不会。

This is what the slide looks like in the app

This is what the exported pdf looks like because the content doesn't resize.

如果你有什么想法，请告诉我。

HTML:

<div style="background-color: green" id="content">
   <h1 style="color: black">Hallo Welt</h1>
   <p>Hallo 3CHIF!</p>
</div>

Answer 1

尝试

#content{
    width:100%;
    height:100%;
}

如果你想启动 max with 或 height 你也可以将它添加到 css 然后看看 .css 是否有效或者我必须说然后使用 js

Answer 2

好吧，也许还有其他解决方案（甚至更好的解决方案），但我认为 scale()，这将扩展 div，因此，它的内容。

那么，我是怎么做到的：

我估计了所需的宽度和高度（在您的情况下为 1920x1080），然后我得到了 div 当前尺寸。
将所需尺寸除以当前尺寸以获得“比率”，然后使用 CSS transform 设置新的 scale(x, y)，如下例所示。

您可以根据自己的代码来获得您的解决方案

var desiredWid = 1920;
var desiredHei = 1080;

var theDiv = $("#content");
var currentWid = theDiv.width();
var currentHei = theDiv.height();

var ratioW = desiredWid / currentWid;
var ratioH = desiredHei / currentHei;

theDiv.css("transform","scale(" + ratioW + "," + ratioH + ")")

var currentSizes = theDiv[0].getBoundingClientRect();
console.log("Adjusted Size:", currentSizes.width + " x " + currentSizes.height)

#content {
  width: 2500px;
  height: 1200px;
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">Original Size: 2500x1200</div>

因为我看到你在用，所以我用了jQuery，但是你也可以用纯 JS 来做。

HTML 调整大小 Div 为 Javascript

HTML Resize Div with Javascript

html

javascript

css

jquery

responsive-design