auto-resize images in posts with link to image URL?

Question

This will be used in my community website (forum, articles) where some users post very large image.

I can auto-resize the images using below codes

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

But one more, I want (on every resized image) a link created to that image URL. So when visitor click the link, they can see the image actual size.

Answer 1

Sure, not a problem. You can use position: absolute to move a link up over the image:

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;
}

The reason you need the extra <div class="img"> is so there's a relatively positioned parent for the absolutely positioned link. This causes the link to use its parent as its coordinate system, rather than the document.

Answer 2

You can do this simply with HTML:

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

When the user clicks on the image, it will take them to the original full-sized image.