自動調整帖子中圖像的大小並鏈接到圖像URL？

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>

當用戶單擊圖像時，它將帶他們到原始的全尺寸圖像。