html - 设计亚马逊附属链接

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 文件中)。然而，当我尝试使图像的缩略图更大时，图像保持相同的大小，并且附属元素之间的宽度/高度变得更大。

我如何设计产品样式？ 先感谢您。
以防万一需要:

github repo

Answer 1

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