auto-resize изображения в сообщениях со ссылкой на изображение 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> 

Когда пользователь нажимает на изображение, он примет их к первоначальному полноразмерного изображения.