我有一张图像，其高度大于其宽度（比例最多可达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>CSStable.questiontable{ width:80%;}我尝试了很多方法，但没有一个有效。我得到的图像显示为适合 td，或者如果我设置宽度 100% 和高度为 auto，我得到的图像显示为适合宽度 100%，但将表格拉得很长。桌子高度是屏幕高度的80%。（正确显示）有问题的 td 是表的第一列及其整列。表的第二列有 6 行。与 CSS 解决方案相比，我确实更喜欢 javascript 解决方案，但任何解决方案都受到高度赞赏。我希望我是可以理解的，为我对英语的掌握不好而道歉。
1 回答
元芳怎么了
TA贡献1798条经验 获得超7个赞
表格单元格将扩展以容纳内容。
如果您将 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 很有用。
添加回答
举报
0/150
提交
取消