如何更改圖片的超鏈接部分中的圖像大小 <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>