автоматически изменять размеры изображений в сообщениях со ссылкой на URL изображения?

Question

Это будет использоваться на моем веб-сайте сообщества (форум, статьи), где некоторые пользователи публикуют очень большие изображения.

Я могу автоматически изменять размеры изображений, используя следующие коды

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

еще один, я хочу (на каждое изображение с измененным размером) ссылку, созданную для URL этого изображения.Поэтому, когда посетители нажимают на ссылку, они могут видеть фактический размер изображения.

Answer 1

Вы можете сделать это просто с помощью HTML:

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

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

Answer 2

Конечно, не проблема.Вы можете использовать position: absolute для перемещения ссылки вверх по изображению:

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">, заключается в том, что для абсолютно позиционированной ссылки есть относительно позиционированный родитель.Это приводит к тому, что ссылка использует своего родителя в качестве своей системы координат, а не документа.