如何更改图片的超链接部分中的图像大小 <a href“”></a> 标签

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>更改图片大小，但可以在图片HTML代码中设置Width和Height属性。

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

Answer 2

不知道您正在使用哪个灯箱，很难给您一个好的答案，一个好的答案是限制灯箱本身中图像的大小。

更好的答案是上传特定大小的图像，在浏览器中调整图像大小都会使外观变差，并且您仍在下载较大的图像，因此浪费了带宽和加载时间。

话虽如此，您可以通过简单地设置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>