自動調整圖像鏈接到圖像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> 

當用戶點擊圖片時，它會帶他們到原來的全尺寸圖像。