将图像调整为固定大小 <td>，宽度为 100%，高度可滚动
我有一张图像，其高度大于其宽度（比例最多可达10倍，并且宽度也在不断变化）
我已经制作了一个固定的 td 宽度和高度。
我正在尝试将图像放入其中，但我希望它显示 100% 的宽度和可滚动的高度。图像的长宽比在显示时不应改变。
这是我的相关代码。
<body onload="getResolution();">
function getResolution() {
var w40w = 0.40 * window.innerWidth ;
var w80h = 0.8 * window.innerHeight ;
document.getElementById('question_td_verb_p_rc').style.width = w40w+'px';
document.getElementById('question_td_verb_p_rc').style.height = w80h+'px';
document.getElementById('question_td_verb_p_rc').style.overflow = "auto";
}
<table class="questiontable" border="1">
<tr>
<td rowspan="6" id="question_td_verb_p_rc" style="padding-left:5px;">
<a href='1.png' target="_blank"><img src="1.png"></a></td>
</tr>
CSS
table.questiontable
{
width:80%;
}
我尝试了很多方法，但没有一个有效。我得到的图像显示为适合 td，或者如果我设置宽度 100% 和高度为 auto，我得到的图像显示为适合宽度 100%，但将表格拉得很长。
桌子高度是屏幕高度的80%。（正确显示）有问题的 td 是表的第一列及其整列。表的第二列有 6 行。
与 CSS 解决方案相比，我确实更喜欢 javascript 解决方案，但任何解决方案都受到高度赞赏。
我希望我是可以理解的，为我对英语的掌握不好而道歉。
慕后森1回答
-
元芳怎么了
表格单元格将扩展以容纳内容。如果您将 td 元素的内容包装在高度和宽度为 100% 的 div 中，系统将知道要给它多少空间，因为您已经设置了其父元素的高度和宽度。如果您还设置了overflow-y：auto，则仅在必要时才会滚动。function getResolution() {var w40w = 0.40 * window.innerWidth ;var w80h = 0.8 * window.innerHeight ;document.getElementById('question_td_verb_p_rc').style.width = w40w+'px';document.getElementById('question_td_verb_p_rc').style.height = w80h+'px';document.getElementById('question_td_verb_p_rc').style.overflow = "auto";}table.questiontable{ width:80%;}<body onload="getResolution();"><table class="questiontable" border="1" style="table-layout: fixed;"> <tr> <td rowspan="6" id="question_td_verb_p_rc" style="padding-left:5px;"> <div style="height:100%; width:100%; overflow-y:auto;"><a href='1.png' target="_blank""><img src="https://ahweb.org.uk/gear.jpg" style="height:auto;width:100%;"></a></div></td> </tr></table></body>注意：在使用 JS 计算尺寸时，请记住，这也需要在调整大小时完成（用户将手机从横向变为纵向或更改桌面上窗口的尺寸）。您可能会发现 CSS 视口单位 vw 和 vh 很有用。
随时随地看视频慕课网APP
相关分类
JavaScript