以固定尺寸调整图像,宽度为 <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%,高度设置为自动,我将显示的图像适合宽度100%,但将桌子拉得很长。

桌子的高度是屏幕高度的80%。(正确显示(有问题的td是表的第一列,也是表的整列。表的第二列有6行

与CSS解决方案相比,我更喜欢javascript解决方案,但任何解决方案都非常受欢迎。

我希望我是可以理解的,为我对英语的掌握不力而道歉。

谢谢。

表格单元格将展开以容纳内容。

如果您将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非常有用。

相关内容

最新更新