以 100% 宽度但高度滚动的固定尺寸 <td> 调整图像答案

【问题标题】：Fit an image in fixed size <td> with 100% width but height with scroll以 100% 宽度但高度滚动的固定尺寸 <td> 调整图像
【发布时间】：2020-11-19 17:49:47
【问题描述】：

我有一个高度大于宽度的图像（比例可能高达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% 和高度自动，我得到显示的图像适合宽度 100% 但将桌子拉得很长。

表格高度为屏幕高度的 80%。（正常显示）有问题的 td 是表格的第一列及其整列。表格的第二列有 6 行。

我确实更喜欢 javascript 解决方案而不是 CSS 解决方案，但是任何解决方案都受到高度赞赏。

我希望我可以理解，为我对英语的糟糕掌握表示歉意。

谢谢。

【问题讨论】：

标签： javascript html css

【解决方案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 很有用。

【讨论】：

我无法让它按预期工作，在将高度设置为 100% 时，它会尝试将图像放入中，将其缩小以适应高度。滚动条不可见，删除高度 100%，我得到宽度 100%，但被拉下，立即显示整个图像而没有滚动条。感谢
的想法，我将尝试更多地使用和
的高度并更新我的发现。谢谢。
嗨，你是说我的 sn-p 不适合你吗？这对我来说很好。你用的是什么浏览器？
它没有按预期工作。我正在使用 chrome，我的图像高度是其宽度的 10 倍。它完全适合。我想要它的宽度 100% 并且它的高度可以滚动。
嗯，它对我来说很好用。你能把你的图片放到imgur上或发布它的网址，这样我就可以试试了。
工作完美！ 192.243.101.163/index.html（它一定是现有容器的东西，因为当我制作这个测试页面时删除了所有额外的东西，然后它工作正常）