How to change the size of images within the hyperlink part of a <a href“”></a> tag

Question

i have a image gallery where a small version of an image can be seen on the page. When the user clicks on the image, some jquery code is executed which will show the original image (like an image gallery). In order to do this, each image has a hyperlink to echo the original file. The code works fine, however some of the original images are really big and often extend down the page. Here is the code:

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

As you can see, within the hyperlink tags i have (). As i said before, some of the original images are really big.

Does anyone know how to ensure that when the "original image" is shown, that the image size stays within the actual page size?

I've played around with it, i copied the tags into the hyperlink and tried to change the size. But it doesn't work.

Answer 1

您无法通过<a href=""></a>更改图片大小，但可以在图片HTML代码中设置Width和Height属性。

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

Answer 2

Without knowing which lightbox you're using it's tough to give you a good answer, a good answer being limiting the size of the image in the lightbox itself.

A better answer is for you to upload images at a particular size, any in browser resizing of an image is going to have a degraded look plus you're still downloading a bigger image so you're wasting bandwidth and load time.

That being said you can limit an image by simply setting the CSS of the img element. Percentages will only work if the image is contained in an element that has a size applied so use pixels.

img{
     max-width:500px;
}

You could also set max-height if you want, I'd only set one or the other though to ensure images don't get distorted.

Answer 3

Hard to test without the proper rnvironment but have you tried the following:

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

replace with and adjust the percentage accordingly to the size that sits the best

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