redimensionner automatiquement les images dans les articles avec un lien vers l'URL de l'image?

Question

Cela sera utilisé dans mon site communautaire (forum, articles) où certains utilisateurs affichent une très grande image.

je peux redimensionner automatiquement les images en utilisant les codes ci-dessous

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

Mais un plus, je veux (sur chaque image redimensionnée) un lien créé à cette URL de l'image. Ainsi, lorsque le visiteur clique sur le lien, il peut voir la taille réelle de l'image.

Answer 1

Bien sûr, pas un problème. Vous pouvez utiliser la position: absolute pour déplacer un lien au-dessus de l'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; 
} 

La raison pour laquelle vous avez besoin du <div class="img"> supplémentaire est donc il y a parent relativement positionné pour le lien positionné de manière absolue. Cela provoque le lien à utiliser son parent comme son système de coordonnées, plutôt que le document.

Answer 2

Vous pouvez le faire simplement avec HTML:

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

Lorsque l'utilisateur clique sur l'image, il leur faudra à l'image en taille réelle d'origine.