resize 相关问题

与控件,窗口,窗体或屏幕的大小调整有关的问题。

如何动态设置iframe大小

我应该如何动态设置 iframe 的尺寸,以便尺寸灵活地适应不同的视口尺寸? 例如: <p&...</desc> <question vote="29"> <p>我应该如何动态设置 iframe 的尺寸,以便尺寸灵活地适应不同的视口尺寸?</p> <p>例如:</p> <pre><code>&lt;iframe src=&#34;html_intro.asp&#34; width=&#34;100%&#34; height=&#34;300&#34;&gt; &lt;p&gt;Hi SOF&lt;/p&gt; &lt;/iframe&gt; </code></pre> <p>在这种情况下,高度会根据浏览器窗口的大小而有所不同。它应该根据浏览器窗口的大小动态设置。</p> <p>任何尺寸,iframe 的长宽比都应该相同。这怎么办?</p> </question> <answer tick="true" vote="38"> <p>如果你使用jquery,可以使用<pre><code>$(window).height();</code></pre></p>来完成 <pre><code>&lt;iframe src=&#34;html_intro.asp&#34; width=&#34;100%&#34; class=&#34;myIframe&#34;&gt; &lt;p&gt;Hi SOF&lt;/p&gt; &lt;/iframe&gt; &lt;script type=&#34;text/javascript&#34; language=&#34;javascript&#34;&gt; $(&#39;.myIframe&#39;).css(&#39;height&#39;, $(window).height()+&#39;px&#39;); &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="14"> <p>不太确定 300 是什么意思?错字小姐?然而,对于 iframe 来说,最好使用 CSS :) - 我之前发现导入 YouTube 视频时它会忽略内联内容。 </p> <pre><code>&lt;style&gt; #myFrame { width:100%; height:100%; } &lt;/style&gt; &lt;iframe src=&#34;html_intro.asp&#34; id=&#34;myFrame&#34;&gt; &lt;p&gt;Hi SOF&lt;/p&gt; &lt;/iframe&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p><del>您在 iframe 的定义中尝试过 <pre><code>height=&#34;100%&#34;</code></pre> 吗?如果您在 CSS 中为“body”添加 <pre><code>height:100%</code></pre>(如果不这样做,100% 将是“100% 的内容”),它似乎会实现您想要的功能。</del></p> <p>编辑:不要这样做。 <pre><code>height</code></pre> 属性(以及 <pre><code>width</code></pre> 属性)必须具有整数作为值,而不是字符串。</p> </answer> <answer tick="false" vote="2"> <p>我发现它在所有浏览器和设备(PC、桌面和移动设备)上效果最佳。</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function iframeLoaded() { var iFrameID = document.getElementById(&#39;idIframe&#39;); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = &#34;&#34;; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + &#34;px&#34;; } } &lt;/script&gt; &lt;iframe id=&#34;idIframe&#34; onload=&#34;iframeLoaded()&#34; frameborder=&#34;0&#34; src=&#34;yourpage.php&#34; height=&#34;100%&#34; width=&#34;100%&#34; scrolling=&#34;no&#34;&gt;&lt;/iframe&gt; </code></pre> </answer> <answer tick="false" vote="1"> <p>最新的 CSS 规则将允许您直接使用视口,如下所示:</p> <pre><code>&lt;iframe src=&#34;html_intro.asp&#34; width=&#34;100vw&#34; height=&#34;50vh&#34;&gt; &lt;p&gt;Hi SOF&lt;/p&gt; &lt;/iframe&gt; </code></pre> <hr/> <p>我个人喜欢通过操作其父容器来调整<pre><code>iframes</code></pre>:</p> <pre><code>&lt;div class=&#39;iframe-parent&#39;&gt; &lt;iframe src=&#34;html_intro.asp&#34;&gt; &lt;p&gt;Hi SOF&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>现在是CSS:</p> <pre><code>.iframe-parent{ width: 100vw; height: 50vh; } /* Expand to the entire container */ iframe{ width: 100%; height: 100%; } </code></pre> </answer> <answer tick="false" vote="0"> <p>现在可以通过 CSS 宽高比来完成!</p> <p>在 iframe 上设置所需的宽度(例如 100%),然后为您的内容设置适当的宽高比。</p> <pre><code>iframe { aspect-ratio: 4 / 3; width: 100%; } </code></pre> <p>浏览器会根据宽高比自动缩放内容。</p> <p>您可能还想根据您的内容设置最小/最大宽度或高度。</p> <p>您可以自己计算自定义纵横比,或使用像这样的在线实用程序<a href="https://andrew.hedges.name/experiments/aspect_ratio/" rel="nofollow noreferrer">纵横比计算器</a>。</p> </answer> <answer tick="false" vote="-4"> <p><strong>高度因浏览器窗口大小而异。它应该根据浏览器窗口的大小动态设置</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;center&gt;&lt;h2&gt;Heading&lt;/h2&gt;&lt;/center&gt; &lt;center&gt;&lt;p&gt;Paragraph&lt;/p&gt;&lt;/center&gt; &lt;iframe src=&#34;url&#34; height=&#34;600&#34; width=&#34;1350&#34; title=&#34;Enter Here&#34;&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

在 Tensorflow 中调整 MNIST 的大小

我一直在研究 MNIST 数据集,以学习如何在我的深度学习课程中使用 Tensorflow 和 Python。 我想使用张量流将 MNIST 的大小调整为 22 和 22,然后我训练它,但我不...

回答 4 投票 0

如何使我的 Tkinter 应用程序适合整个窗口,无论大小如何?

我使用 Python 制作了一个 Tkinter 应用程序。我希望它能够自动调整大小并填充整个窗口,无论我如何调整它的大小。 问题是,当我扩大窗口大小(使用光标)时,会出现灰色空间......

回答 1 投票 0

OpenCV resize() 中的 INTER_LINEAR 插值如何工作?

我正在弄清楚当我们设置 fx=2 和 fy=1 时 OpenCV resize() 函数如何计算线性插值。我写了以下最小工作示例, 导入CV2 将 numpy 导入为 np 啪嗒啪嗒...

回答 2 投票 0

如何使用flexbox创建动态方块?

我在设置我正在做的草图项目的动态部分时遇到一些困难。接下来我要实现的想法是,

回答 1 投票 0

如何在Python中调整文件夹中的图像大小并将其保存到另一个文件夹?

我有一个图像文件夹。我调整了此文件夹中每个图像的大小,并希望将调整大小的图像保存到不同的文件夹中。以下是我的代码: 导入全局 导入操作系统 new_folder = '/新/文件夹/of/

回答 2 投票 0

Flutter - 如何在激活键盘时停止调整对话框大小或移动

我有许多使用键盘进行文本输入的对话框。每当激活键盘时,对话框窗口就会向上移动位置并调整大小。 我想停止这种行为,以便......

回答 1 投票 0

如何通过CSS使所有不同高度和宽度的图像相同?

我正在尝试创建一个由产品照片组成的图像墙。不幸的是,它们的高度和宽度都不同。如何使用 css 使所有图像看起来大小相同?最好...

回答 15 投票 0

缩小视口高度时调整图像高度

我到处搜索,但找不到在缩小窗口垂直高度时将图像保留在视口中的解决方案。这是一个屏幕截图,显示了我正在尝试做的事情。任何考虑赞赏...

回答 1 投票 0

如何在 Windows 上更改 Flet 窗口的大小或指定其不可调整大小?

在 Windows 上的 Flet 中,我正在运行 calc 演示并尝试在 Python 中修改应用程序窗口的属性。 如何在代码中更改 Flet 窗口的大小并指定它不应该...

回答 3 投票 0

将 flutter 中的图标大小加倍

在 Flutter 中,想要一个比“通常”大固定系数的图标,例如 2 倍大小。我在 Icon 构造函数中看到了 size 参数,并且根据该参数的文档,...

回答 4 投票 0

如何在不使用 CSS 页面的情况下更改随机图像的图像大小?

对于我的网络漫画网站,我正在尝试使其每次您访问/刷新网站时图像都会变成不同的角色。我花了几个小时试图在我的网站上获取此代码...

回答 1 投票 0

信号量动态调整大小C#

我正在尝试使用信号量来控制可以同时运行的作业实例数。虽然使用等待方法相当简单,但我也希望该值可以在运行时配置,所以

回答 3 投票 0

如何在 React 中使用 @dnd-kit/core 库调整卡片大小时禁用拖动?

我有一个 React 组件,它使用 @dnd-kit/core 库来实现拖动功能,并使用可重新调整大小的库来调整大小功能。该组件由一张卡片组成,可以同时...

回答 1 投票 0

适合 <iframe> 以正确调整动态 HTML 的大小

看这里: 我只想打开黄色部分,背景中的其余部分是不必要的,我该怎么做? 打开iframe的代码: ... 看这里: 我只想打开黄色部分,背景中的其余部分是不必要的,我该怎么做? 打开iframe的代码: <div class="col-12 mb-3"> <a class="nav-link text-white" href="javascript:void(0);" onclick="openModal('emailVerification', '../pages/email-verification.html')"> <button id="verifyEmailButton" type="button" class="btn btn-success" style="width: 300px;">Bekräfta din e-post</button> </a> </div> <div class="modal fade" id="emailVerificationModal" tabindex="-1" role="dialog" aria-labelledby="emailVerificationModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document"> <div class="modal-content border-0"> <button style="background-color: #2e4873; color: white;;" type="button" class="btn btn-info close small-close-btn" aria-label="Close" data-dismiss="modal" onclick="closeEmailVerificationModal()">&times;</button> <br> </button> <div class="modal-body"> <iframe id="emailVerificationIframe" src="" frameborder="2" style="width: 100%; height: 80vh;"></iframe> </div> </div> </div> </div> & 带有 iframe 内容的 HTML: <div class="main"> <div class="div-1"> <div class="div-2"> <img src="../social/icons/mail.png" width="70px" /> <h3>Verifiera din e-post adress</h3> <p id="ppp"> Du är nästan där! Vi har skickat ett mail till: <span style="font-weight: bold;" class="d-sm-inline d-none" id="userID"><span id="userName"></span></span> </p> <p> Klicka bara på länken i det e-postmeddelandet för att slutföra din registrering. Om du inte set det, kan du behöva <span id="bold">kolla din skräppost.</span </p> </div> <p id="message"></p> <div class="buttondiv"> <button style="background-color: #2e4873;" type="button" class="btn btn-info"onClick="resend()">Skicka igen</button> <button style="background-color: #2e4873;" type="button" class="btn btn-info" onClick="reload()">Bekräfta</button> </div> <div id="info-message" class="alert alert-success alert-dismissible text-white" role="info" style="display: none;"> <span class="text-sm">Nu har vi skickat verifikationslänken igen.</span> </div> <div id="warning-message" style="display: none;"> <span class="text-sm">Du har inte bekräftat din e-post adress än.</span> </div> <div id="success-message" style="display: none;"> <span class="text-sm">Din e-post adress är nu bekräftad.</span> </div> </div> </div> 我有多个这样制作的模态,确实需要调整它们的大小。 这是一个如何使用具有透明背景的对话框的简单示例 您可以在这里找到文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog const dialog = document.querySelector("dialog"); const showButton = document.querySelector("dialog + button"); const closeButton = document.querySelector("dialog button"); // Le bouton "Afficher la fenêtre" ouvre le dialogue showButton.addEventListener("click", () => { dialog.showModal(); }); // Le bouton "Fermer" ferme le dialogue closeButton.addEventListener("click", () => { dialog.close(); }); ::backdrop { opacity: 0; } <main> <dialog> <p>Hello World</p> <button autofocus>Close</button> </dialog> <button>Show Dialog</button> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Section 1.10.32 du "De Finibus Bonorum et Malorum" de Ciceron (45 av. J.-C.) "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Traduction de H. Rackham (1914) "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" </p> <main>

回答 1 投票 0

通过拖动标题栏更改最大屏幕尺寸图标(和变量)

在桌面应用程序(用 Electron 编写)中,我正在尝试实现一项功能,允许用户全屏打开应用程序或将其返回到相反状态(最初是

回答 1 投票 0

在 Android Studio 中更改回默认字体大小

我不小心在Android Studio中将字体大小设置得太大了。我现在无法使用任何功能,包括滚动。我没有启用通过 Ctrl+鼠标滚轮更改字体大小。我怎样才能改回d...

回答 1 投票 0

JavaFX 根据 VBox 元素的数量动态调整窗口大小

我想构建一个实用工具,可以在从 VBox 添加/删除子项时垂直调整大小。子项通过用户输入进行修改。用户无法调整应用程序窗口的大小。 我有

回答 1 投票 0

CSS - 使元素本身变短

所以基本上我制作了一个父元素宽度 90% 的输入元素。 我在输入元素之后创建了一个 span 标签。所以我想根据span标签的内容,输入elem...

回答 1 投票 0

图像在实时时不会调整大小,但在 Visual Studio 代码中可以调整

身体{ 字体系列:sans-serif、Georgia、“Times New Roman”、Times、serif } 标头{ 文本对齐:居中; 背景颜色:白杏仁色; 内边距:10 像素 } #照片{ 宽度:25%; 博...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.