问题:有一个包含两个单元格的表格。每个单元格中有两个图像。 我需要将这些图像调整到边框并保持纵横比。 如果有横向图像，它应该适合左右边框。 如果有纵向图像，它应该适合顶部和底部边框。
<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>
有两张小图片:yandex Logo ，它是横向图像(宽度>高度) 以及南方公园一个人的图像(这是我在谷歌中找到的第一张肖像图像)。它的高度大于宽度。 如果javascript函数没有效果(尝试在开头插入“return;”)，则两个图像都很小并且位于表格单元格的中心。 但如果 javascript 函数有效，它仅对横向图像有效。 所以我们可以看到 Yandex Logo 按照我的要求安装在左侧和右侧，但右侧图片未安装在顶部和底部。这里有一个问题。
谢谢。
最佳答案
这是你的<center>应答器会带来问题。
删除<center>每个应答器<td> ，并添加style="text-align:center"每个 <td>以保持对齐。
现在img.style.height = "100%";将适用于家长<td> .
关于javascript - 如何在 HTML 中使图像适合边框并保持宽高比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7041278/