使用 iframe 缩略图创建链接答案

【问题标题】：Create a link with an iframe thumbnail使用 iframe 缩略图创建链接
【发布时间】：2018-06-20 01:56:56
【问题描述】：

我正在尝试制作投资组合页面，并且想使用我的一个项目（实时页面）的缩略图作为该项目的链接。我已经制作了缩略图，但不知道如何使它成为可点击的链接。

这是我目前的代码：

<div class="thumbnail-container">
    <div class="thumbnail">
      <figure>
          <iframe src="https://codepen.io/valsburger/full/wppwmJ " scrolling="no">
          </iframe>
      </figure>
    </div>
</div>

我尝试在 iframe 周围的多个位置放置一个元素。似乎没有任何效果。

【问题讨论】：

标签： html iframe hyperlink thumbnails

【解决方案1】：

iframe 是“通往另一个世界的窗口”。该窗口中可能有很多链接。因此，如果您可以链接 iframe 本身，那将是一个坏主意。 iframe 被嵌入，您无法链接它。

坦率地说，我不确定您为什么要首先链接 iframe？对我来说似乎很奇怪。你为什么不链接缩略图本身？那只是一个普通的 img 元素。

【讨论】：

因为我使用的是免费版的 CodePen，无法上传照片。

【解决方案2】：

不要这样做，这会导致您的页面变慢，坦率地说，这是不必要的。

这是您想要访问的页面的照片：这是您应该使用的代码：

<div class="thumbnail-container">
    <div class="thumbnail">
      <figure>
          <img src="https://i.stack.imgur.com/7y4fc.jpg">
      </figure>
    </div>
</div>

【讨论】：

谢谢。我想使用作为链接，我知道该怎么做，但我使用的是免费版本的 CodePen，无法上传资产。我没有找到任何我喜欢的文件托管网站。
好吧，希望它当时有效，如果可以，请将我的回答标记为正确，谢谢

【解决方案3】：

一个丑陋的解决方案是在<iframe> 顶部放置一个透明的、相对定位的<div>，将其调整大小以覆盖<iframe>，然后将其包裹在链接到您页面的<a> 标记中。虽然我建议使用常规的<img> 元素作为缩略图。

【讨论】：