css - 打开图像的宽度/高度(图库)

Question

我正在处理一个网站的图库，它由显示所有图片的缩略图 block 组成以及用于显示特定图像的部分。

这是我用来以实际大小显示缩略图和图像的代码。

<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
 <img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>

问题是:我想不出任何东西来设置打开图像的大小。设置缩略图大小没问题: height="75"width="75"但打开的大小是个问题。

Answer 1

使用此方法，您无法设置要链接到的图像的大小。它将在没有关联 HTML 的浏览器中打开，因此它将以全尺寸打开(或缩放以适合，具体取决于浏览器)。

解决方案是链接到包含图像的页面。这使您可以设置确定图像大小的代码。但是，这是一个手动过程 - 500 张图像将需要 500 个自定义页面。不理想。

如果你变得更复杂，你可以构建一个脚本并传递它和图像名称、高度和宽度，然后动态构建页面以在给定的高度和宽度显示图像。然后您可以使用 1 个脚本显示任意数量的图像。

另一种方法是使用 lightbox插件，可让您将全尺寸图像弹出到页面其余部分顶部的框中。您可能已经在 Facebook 或其他网站上看到过这种方法——它很流行，而且使用起来并不费力。我喜欢它，因为你不必离开你所在的页面，而且你可以在一个相当紧凑的页面上显示很多照片。