我有一张图像的高度大于宽度(比例可能高达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非常有用。