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

Question

我在我正在开发的 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;

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

卡片

我希望整个前一个屏幕都适合这张卡。 有什么方法可以“预渲染”组件或任何其他解决方案？ 提前致谢。 为问题的长度道歉。

Answer 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;
}

如果这似乎相关，这里是完整的解释