如何更改标记的超链接部分中的图像大小

Question

我有一个图片库，在页面上可以看到一个小版本的图像。当用户单击图像时，将执行一些jquery代码，该代码将显示原始图像(如图片库)。为了做到这一点，每个图像都有一个超链接来回显原始文件。代码运行得很好，但是一些原始图像非常大，通常会延伸到页面上。代码如下：

<div id="w">
  <div id="content">
      <div id="thumbnails"><?php while ($row=mysql_fetch_array($res)){?>
        <a href="<img src="<?php echo $row["Image"]; ?>"/>"><img src="<?php echo $row["Image"]; ?>" height="124.4" width="124.4" border="5" alt="turntable" /></a>
        <?php } ?>
</div>
  </div>
</div>
<script type="text/javascript">
$(function() {
    $('#thumbnails a').lightBox();
});
</script>

如您所见，在超链接标记中我有()。正如我之前所说的，一些原始图像真的很大。

有人知道如何确保在显示“原始图像”时，图像大小保持在实际页面大小之内吗？

我已经试过了，我把标签复制到超链接中，并试图改变大小。但它不起作用。

Answer 1

你不能在<a href=""></a>中改变图像的大小，但是在你的图像代码中你可以设置宽度和高度的属性。

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Answer 2

如果不知道你使用的是哪个lightbox，就很难给你一个好的答案，一个好的答案是限制lightbox本身中图像的大小。

一个更好的答案是你上传特定大小的图片，在浏览器中调整图片的大小将会有一个降级的外观，而且你仍然在下载一个更大的图片，所以你在浪费带宽和加载时间。

也就是说，您可以通过设置img元素的CSS来限制图像。仅当图像包含在已应用大小的元素中时，百分比才起作用，因此请使用像素。

img{
     max-width:500px;
}

如果你愿意，你也可以设置max-height，我只会设置其中的一个，以确保图像不会失真。

Answer 3

没有合适的环境很难测试，但是你有没有尝试过以下方法：

<a href="<img src="<?php echo $row["Image"]; ?>"/>">
    <img src="<?php echo $row["Image"]; ?>" height="124.4" width="124.4" border="5" alt="turntable" />
</a>

替换为并相应地将百分比调整为最合适的大小

<a href="<img style="width="100%" src="<?php echo $row["Image"]; ?>"/>">
    <img src="<?php echo $row["Image"]; ?>" height="124.4" width="124.4"  border="5" alt="turntable" />
</a>