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代码中，您可以设置宽度和高度的属性。

<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>

如何更改<a href""=""></a>标记的超链接部分中的图像大小

3 个答案: