自动调整图像链接到图像URL的文章中的图像?
问题描述:
这将用于我的社区网站(论坛,文章),其中一些用户张贴非常大的图像。自动调整图像链接到图像URL的文章中的图像?
使用下面的代码
#post img {
max-height: 1000px;
max-width: 700px;
}
但多了一个,我想(每调整图像)创建,该图像URL的链接,我可以自动调整图像。所以当访客点击链接时,他们可以看到图片的实际尺寸。
答
好的,不是问题。您可以使用位置是:绝对在图像上移动一个链接起来:
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">
究其原因,所以有绝对定位的链接相对定位的父级。这会导致链接将其父项作为其坐标系,而不是文档。
答
你可以用HTML简单地做到这一点:
<a href='image.jpg'><img src='image.jpg' alt='image'></a>
当用户点击图片时,它会带他们到原来的全尺寸图像。