自动调整帖子中的图像大小并链接到图像 URL？答案

【问题标题】：auto-resize images in posts with link to image URL?自动调整帖子中的图像大小并链接到图像 URL？
【发布时间】：2011-11-18 18:52:03
【问题描述】：

这将用于我的社区网站（论坛、文章）中，一些用户会在其中发布非常大的图片。

我可以使用以下代码自动调整图像大小

#post img {
    max-height: 1000px;
    max-width: 700px;
}

但还有一个，我想要（在每个调整大小的图像上）创建一个指向该图像 URL 的链接。所以当访问者点击链接时，他们可以看到图片的实际大小。

【问题讨论】：

标签： javascript css image

【解决方案1】：

当然，没问题。您可以使用 position: absolute 将链接向上移动到图像上：

HTML

<div class="img">
    <img src="your-img.jpg"/>
    <a href="your-img.jpg" class="full-size">View Full Sized</a>
</div>

CSS

#post .img {
   position: relative;
}

#post img {
   max-height: 1000px;
   max-width: 700px;

   position: relative;
   z-index: 1;
}

#post a.full-size {
   position: absolute;
   z-index: 2;

   /* Change this to move the link around */
   top: 0px;
   left: 0px;
}

您需要额外的<div class="img"> 的原因是绝对定位链接有一个相对定位的父级。这会导致链接使用其父级作为其坐标系，而不是文档。

【讨论】：

【解决方案2】：

您可以简单地使用 HTML 来做到这一点：

<a href='image.jpg'><img src='image.jpg' alt='image'></a>

当用户点击图片时，它会将他们带到原始的全尺寸图片。

【讨论】：