Javascript 如何在react中调整渲染组件的大小

我在react网站上有这个组件。它是使用walls.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;

从“React”导入React；
导入“/Home.css”；
常数墙=（{src}）=>{
返回(
);
}
导出默认墙；

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

---

我希望上一个屏幕的全部都能放在这张卡片里。是否有任何方法可以“预渲染”组件或任何其他解决方案？提前谢谢。对于问题的长度表示歉意。

看起来问题的大小正在调整。但是默认情况下会显示一个iframe滚动条-您可以随时将其关闭。还有一个问题是，这是一个组件，但却包含一个id——这意味着您不能（不应该）重用它。值得注意的是：

iFrame

对于仅显示图像来说非常沉重-您确定不想只显示图像吗？我正在尝试从Instagram个人资料中获取媒体帖子，并将其作为网格显示在我的网站上。我也在使用walls.io。我查看了Instagram提供的任何API，唯一发现的是FacebookGraphAPI，它确实令人困惑。我是一个新手，所以我希望能就如何实现我的目标提出任何建议。正如你所说，组件在一定程度上正在调整大小，但我尝试了很多，但我似乎无法得到我所希望的结果。我想有至少4个职位，以适应里面的卡。我正在试图找出是否有办法使iframe的内容与组件一起收缩。

找出是否有办法使iframe的内容与组件一起收缩-回答：没有。您（您的组件）无法控制iframe中的内容。使用图像进行此操作更好。Iframe是错误的方向，我明白了。谢谢你的回复。我真的很感激。但是有没有一种方法可以使iframe的内容保持不变，但组件本身的大小会减小？我的意思是，组件保持不变，只是整体尺寸减小了。我希望我没有太困惑。