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

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: 1000p开发者_如何学Cx;
    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.

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.

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.