How to fit an image to borders and keep aspect ratio in HTML_问答_开发者

A problem: there is a table with two cells. And two images in each cell. I need to fit these images to borders and keep aspect ratio. If there is a landscape-orientation image, it should fit to left and right borders. If there is a portrait-orientation image, it should fit to top and bottom borders.

<html><head><title>Test page</title></head><body> 
    <script type="text/javascript"> 
    function func(imgname){
        var img = document.getElementById(imgname);
        if(img.height >= img.width) {
            img.style.height = "100%";
            img.style.position = "relative"
            img.style.width = "auto";
        }else{
            img.style.width = "100%";
            img.style.position = "relative"
    开发者_如何转开发        img.style.height = "auto";
        }
    }
    function rsz(imgname){
        alert('resize '+imgname)
    }
    </script> 


<center><table width="80%" height="90%" cellpadding="0" cellspacing="5" border="1">
<tr>
<td width="50%" height="80%" onclick="alert('pic 1') " id="td1" ><center>
<img id="imgL" onload="func('imgL');"  src="http://img.yandex.net/i/www/logo.png"  />
</center></td>
<td width="50%" height="80%" onclick="alert('pic 2') " id="td2" ><center>
<img id="imgR" onload="func('imgR');" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
</center></td></tr></table></center></body></html>

There are two small pictures: yandex logo, it's landscape-oriented image (width>height) and image of one person from South Park (it was the first portrait-oriented image which I found in google). Its height is greater than width. If javascript function has no effect( try to insert "return;" in the beginning), both images are small and are in the centers of table cells. But if javascript function works, it has effect ONLY on landscape-oriented images. So we can see Yandex logo fitted to left and right as I want, but the right picture is not fitted to top and bottom. And here is a problem.

Thanks.

This is your <center> balise that makes problems.

Remove the <center> balise in each <td>, and add style="text-align:center" on each <td> to keep the alignment. Now the img.style.height = "100%"; will be apply to the parent <td>.

This works:

<html>

  <head>
    <title>Test page</title>
    <script type="text/javascript">
      function func (img) {
        if(img.height >= img.width) {
          img.style.height = "100%";
          img.style.width = "auto";
        } else {
          img.style.width = "100%";
          img.style.height = "auto";
        }
      }
      function rsz(imgname) {
        alert('resize '+imgname);
      }
    </script>
  </head>

  <body>
    <table width="80%" height="90%" cellpadding="0" cellspacing="5" border="1" style="margin-left:auto;margin-right:auto;">
      <tr>
        <td width="50%" height="80%" onclick="alert('pic 1') " id="td1" style='text-align: center;'>
          <img id="imgL" onload="func(this);"  src="http://img.yandex.net/i/www/logo.png"  />
        </td>
        <td width="50%" height="80%" onclick="alert('pic 2') " id="td2" style='text-align: center;'>
          <img id="imgR" onload="func(this);" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
        </td>
      </tr>
    </table>
  </body>

</html>

What I have done is remove the <center> tags and redo the centering with CSS, added a couple of closing ; on the end of some JS lines, removed the img.style.position = "relative" as it was doing nothing in this context (you need to tell it where to be postioned) and moved the <script> element to the <head> - not necessary to make it work but makes it more readable.

HOWEVER, what you are doing will not always produce the result you want because your table cells are not explicitly square. Becuase the shape of the cell is dictated by the shape/size of the browser window (due to the fact all sizes are stated in %) if you get an image that is almost square, but slightly taller than it is wide, and the browser is shaped in a tall manner, the image will overflow the vertical edges of the cell (try loading the above page and resizing and you will see Stan overflow out the right side of his container).

If you insist on using a table to do this (should be using DIVs and CSS really) you need to add a calculation to account for the fact that your containers don't necessarily have an aspect ratio of 1:1 or, preferably, size them explicitly so you always know what their aspect ratio is.

EDIT: I have just changed the above example so you are passing the image itself to the function, rather than the ID of the image, which is more efficient since you no longer have to do a document.getElementById to obtain the reference.