使用 Javascript 调整 HTML div 大小

Posted 2023-05-08

【中文标题】使用 Javascript 调整 HTML div 大小

【英文标题】：HTML Resize Div with Javascript

【发布时间】：2021-02-23 18:11:33

【问题描述】：

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

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

如果用户决定将其导出为 pdf，则 div 应调整大小为 1920x1080，然后应将其导出（这样 pdf 与用户窗口的大小不同，但始终为 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>

【问题讨论】：

为什么要如此复杂和固定像素高度和宽度，而不是使用 100vw/100vh 来调整使用的屏幕。然后使用打印查询来调整专门用于打印的设计。

好吧，我正在调整它的大小，所以没问题。我使用像素来计算 pdf 的大小（它只需要像素作为大小）

【参考方案1】：

好吧，也许还有其他解决方案（甚至更好的解决方案），但我对 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 来做。

【讨论】：

非常感谢！我从没想过使用“比例”。效果很好。

【参考方案2】：

试试

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

如果你想用或高度初始化最大值，你也可以将它添加到 css 然后看看 .css 是否有效 或者我必须说 然后用js

【讨论】：

我不认为 CSS 在那里工作，因为我试图改变高度和宽度只是为了导出。正如我所说，容器的宽度和高度会发生变化，但内容不会。

您也可以在 js 中添加宽度高度 100% 看看 max-width 或 max-height 意味着无论宽度或高度是什么，只要它低于该特定值就可以，它没有任何效果在值下方，因此您必须确定 div 的宽度（或高度）