如何在反应中调整渲染组件的大小答案

【问题标题】：How to resize a rendered component in react如何在反应中调整渲染组件的大小
【发布时间】：2020-12-28 03:43:17
【问题描述】：

我在我正在开发的 react 网站上有这个组件。它是使用 wall.io 生成的 iframe。

这是代码：

import React from 'react';
import './Home.css';

const Wall = ({src}) => {
    return (
        <div className='container'>
            <iframe
                className="responsive-iframe"
                allowFullScreen id="wallsio-iframe"
                src={src}
                loading="lazy"
                title="My social wall">
            </iframe>

        </div>
    );
}

export default Wall;

我想调整这个组件的大小并将其添加到卡片组件中。但是当我这样做时，我希望调整整个组件本身的大小（图像和文本应该变小），而不是改变组件的尺寸。这是卡片的当前状态：

Card

我希望整个前一个屏幕都适合这张卡片。有没有办法“预渲染”一个组件或任何其他解决方案？提前致谢。抱歉问题太长了。

【问题讨论】：

它看起来正在调整大小。但默认情况下会显示 iframe 滚动条 - 您可以随时将其关闭。同样存在问题的是这是一个组件但包含一个 id - 这意味着您不能（不应该）重用它。值得注意的是：iframes 仅用于显示图像非常繁重 - 您确定不想仅显示图像吗？
我正在尝试从我的 Instagram 个人资料中获取媒体帖子，并将其显示为我网站上的网格。我正在使用walls.io。我查看了 Instagram 提供的任何 API，唯一发现的是 Facebook Graph API，这确实令人困惑。我对此相当陌生，因此我将不胜感激有关如何实现我的目标的任何建议。
就像你说的，组件的大小在一定程度上被调整了，但我试着摆弄了很多，但我似乎无法得到我希望的结果。我希望至少有 4 个帖子可以放入该卡中。我想弄清楚是否有办法让 iframe 的内容与组件一起缩小。
figure out if there is a way to have the contents of the iframe be shrunk along with the component - 答案：不。您（您的组件）无法控制 iframe 中的内容。使用图像可以更好地完成此操作。 iframe 是错误的方向。
我明白了。感谢你的回复。对此，我真的非常感激。但是有没有办法让 iframe 的内容保持不变但组件本身的大小减小了？我的意思是组件保持不变，只是它的整体尺寸减小了。我希望我不会太混乱。

标签： javascript html css reactjs web

【解决方案1】：

我不确定这是您正在寻找的解决方案，但无论如何它是：

尝试使用 css 缩放属性：


.container {
  width: 750px;   //you can always adjust
  height: 1500px; //you can always adjust
  padding: 0;     
  overflow: hidden;
}


.responsive-iframe {
  zoom: 0.75;
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0;
}

如果这看起来相关，这里是 full explanation

【讨论】：