适合固定大小的图像<td>宽度为 100%，但高度为滚动

Question

I have a image whose height is more than its width (the ratio could be up to 10 times , and width also keeps changing)我有一个高度大于宽度的图像（比例可能高达 10 倍，宽度也不断变化）

I have made a fixed td with width and height.我做了一个固定的宽度和高度的 td。

I am trying to fit the image in that however I want it to display 100% its width and the height to be scrollable.我正在尝试将图像放入其中，但是我希望它显示 100% 的宽度和高度是可滚动的。 The aspect ratio of the image should not change on display.显示时图像的纵横比不应改变。

Here is my relevant code.这是我的相关代码。

<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 CSS

table.questiontable
{
    width:80%;
}

I have tried many things but none have worked.我尝试了很多东西，但都没有奏效。 I get the image displayed as fit into the td, or if I set width 100% and height auto, I get the image displayed fitting the width 100% but pulling the table very long down.我将图像显示为适合 td，或者如果我将宽度设置为 100% 和高度为自动，则显示的图像适合宽度为 100%，但将表格拉得很长。

The table height is 80% the screen height.表格高度是屏幕高度的 80%。 (displays properly) The td in question is the first column of the table and its the whole column. （正确显示）有问题的 td 是表的第一列及其整列。 The second column of the table has 6 rows in it.表的第二列有 6 行。

I do prefer a javascript solution over a CSS solution however any solution is highly appreciated.我确实更喜欢 javascript 解决方案而不是 CSS 解决方案，但是任何解决方案都受到高度赞赏。

I hope I am understandable, apologies for my poor grip on the English language.我希望我是可以理解的，为我对英语的掌握不好而道歉。

Thanks.谢谢。

Answer 1

A table cell will expand to accommodate the content.表格单元格将扩展以容纳内容。

If you wrap the td element's content in a div which has height and width 100% the system will know how much space to give it as you have already set the height and width of its parent element.如果您将 td 元素的内容包装在高度和宽度为 100% 的 div 中，系统将知道要给它多少空间，因为您已经设置了其父元素的高度和宽度。

If you also set overflow-y: auto there will be scrolling only if necessary.如果您还设置了 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>

Note: in using JS to calculate dimensions remember that this needs to be done on a resize also (a user turning their phone from landscape to portrait or altering the dimensions of the window on a desktop).注意：在使用 JS 计算尺寸时请记住，这也需要在调整大小时完成（用户将手机从横向变成纵向或改变桌面上窗口的尺寸）。 You might find the CSS viewport units vw and vh useful.您可能会发现 CSS 视口单位 vw 和 vh 很有用。

适合固定大小的图像<td>宽度为 100%，但高度为滚动

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-19 22:20:23

适合固定大小的图像<td>宽度为 100%，但高度为滚动

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-19 22:20:23

解决方案1
1 已采纳 2020-11-19 22:20:23