Question

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

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

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

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

Answer 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">的原因是，绝对定位的链接有一个相对定位的父级。这会导致链接使用其父级作为其坐标系，而不是文档。

Answer 2

您只需使用HTML即可完成此操作：

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

当用户点击图片时，会将其转到原始的完整尺寸图片。

在包含图片网址链接的帖子中自动调整图片大小？

2 个答案: