自动调整图像链接到图像URL的文章中的图像？

Question

这将用于我的社区网站（论坛，文章），其中一些用户张贴非常大的图像。

使用下面的代码

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

但多了一个，我想（每调整图像）创建，该图像URL的链接，我可以自动调整图像。所以当访客点击链接时，他们可以看到图片的实际尺寸。

Answer 1

好的，不是问题。您可以使用位置是：绝对在图像上移动一个链接起来：

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> 

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