样式化亚马逊附属链接

Question

我有一个页面，其中会像这样显示多个亚马逊会员链接。

{amazon.map((amazon) => (
          <div className="col-sm-4" key={amazon.link}>
             <iframe
              style={{height: '300px', width: '300px'}}
              marginwidth="0"
              marginheight="0"
              scrolling="no"
              frameborder="0"
              src={amazon.link}
            ></iframe>
          </div>
        ))}

这工作正常，（链接存储在 json 文件中）。但是，当我尝试放大图像的缩略图时，图像保持相同大小，附属项目之间的 width/height 变大。

我如何为产品设计风格？先感谢您。
以防万一：

github repo

Answer 1

您将无法编辑 iframe 中的内容，因为 iframe 正在呈现您无法控制的亚马逊网页。解决此问题的一种方法是自己手动创建产品卡，而不是使用亚马逊提供的 iframe。 Amazon affiliate 提供了一个简单的 URL link 你可以用来制作你自己的卡片。

样式化亚马逊附属链接

Styling amazon affliate links

html

css

iframe

amazon-product-api

reactjs