Question

我有一些大的.png（.jpg，...）文件需要几乎全屏才能看到。如何在标准HTML页面上创建缩略图？标签中是否存在某种尺寸缩放控制，我不知何故错过了？

当鼠标悬停在这样的缩略图上时，我可以显示大图像吗？（JavaScript和CSS都可以回答）。

编辑：由于目标浏览器可能以不同的大小分辨率显示，如何将缩略图按比例缩放到显示的网页/文本大小？

Answer 1

该技术实际上相当于烟雾和镜子，因为两个图像都直接在页面上编码。但是，较大的图像通过CSS不可见，只有当访问者在链接上悬停时才会显示。单击该链接可在新页面中打开完整大小的图像。上图为：

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div>

分区内链接的图像会自动通过CSS隐藏：

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
}

由于所有图像都是自动隐藏的，因此有必要将缩略图显示为实际链接之外的背景图像。为了使链接在图像上工作并在图像下方显示文本（而不是在图像上方），必须包含以下代码：

#links a {
  display:block;
  padding-top: 110px;
}

当光标悬停在链接上方时，链接上方会显示较大的图像：

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}

如何在纯HTML页面上使用悬停显示创建缩略图？

1 个答案: