如何调整图像大小以适应按钮按下时的容器高度？答案

【问题标题】：How can I resize image to fit container height on button-press?如何调整图像大小以适应按钮按下时的容器高度？
【发布时间】：2020-03-15 02:49:59
【问题描述】：

所以我试图通过为汉字添加笔顺图来调整我的 Anki 抽认卡。

图表由名为Kanji Colorizer 的插件生成。

喜欢这个插件，但是图片是

太大了
垂直堆叠

所以...我想创建一个滚动框，其中包含水平图像并在有太多汉字无法并排显示时水平滚动。

我认为我至少在这方面取得了成功。（见下面的代码）。

现在的问题是，尽管框水平滚动（如果我启用它，也会垂直滚动），但图像仍然保持原样。这意味着我需要允许垂直滚动或接受无用的裁剪图像。

如何调整图像大小以适合框？

澄清一下：

html 看起来像这样：

<span style="font-size: 20px; "> {{Meaning}} </span>

<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<div id = "output"></div>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space:nowrap;overflow-y:hidden;overflow-x:auto;display:none">
    <div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>

<script>
function showHideStrokeOrder() {
    var out = document.getElementById("output");

    var scrollbox = document.getElementById("scrollboxStrokeOrder");
    if (scrollbox.style.display === "none") {
       scrollbox.style.display = "block";
    } else {
        scrollbox.style.display = "none";
    };

    var imgs = document.getElementById('strokeOrderPictures');

    var maxHeight= parseFloat(scrollbox.style.height);
    var imgsHeight = imgs.firstChild.height;

    out.innerHTML = "scrollbox height = " + maxHeight + ", imgs height = " + imgsHeight;

    if(imgsHeight > maxHeight) {
        const scale = maxHeight / imgsHeight;
        out.innerHTML += ", scaling = " +scale;

        //this doesn't work and should be replaced, just to clarify intent:
        imgs.style.height = maxHeight;
        imgs.style.width = 'auto';
    };
}
</script>

其中{{Stroke Order Diagram}} 是对生成图表图像的卡片字段的引用。在上面的示例中，它包含两张单独的图片，每个汉字一张）。

更新：将示例分享为可下载的卡片组，如果您想尝试一下：

https://ankiweb.net/shared/info/1180304154

【问题讨论】：

当你让浏览器处理宽度时会发生什么 - 即，只是将图像的高度属性设置为容器的高度而不指定宽度？
@gordon 这似乎有效，谢谢。想从中找出答案吗？
酷。乐于助人

标签： javascript html css image anki

【解决方案1】：

对于任何在未来寻找类似东西的人，这里是最终代码：

<span style="font-size: 20px; "> {{Meaning}} </span>

<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; ">
{{furigana:Reading}}
</span>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space: nowrap;overflow-y:hidden;overflow-x:auto;display:none">
    <div id='strokeOrderPictures'>{{Stroke Order Diagram}}</div>
</div>
</center>


<script>
function showHideStrokeOrder() {    
    var scrollbox = document.getElementById("scrollboxStrokeOrder");
    if (scrollbox.style.display === "none") {
       scrollbox.style.display = "block";
       resizeStrokeOrderDiagrams();
    } else {
        scrollbox.style.display = "none";
    };
}
function resizeStrokeOrderDiagrams(){
    var scrollbox = document.getElementById("scrollboxStrokeOrder");
    var imgs = document.getElementById('strokeOrderPictures');

    var maxHeight= parseFloat(scrollbox.style.height)
    var imgsHeight = imgs.firstChild.height

    if(imgsHeight > maxHeight) {
        var diagrams = imgs.getElementsByTagName("img");

        for( i=0; i< diagrams.length; i++ ) {
            var d = diagrams[i];
            d.height= maxHeight -5;
        }
    };

}
</script>

【讨论】：

【解决方案2】：

将图像高度与容器匹配

通过 jQuery：

$("#myImg").prop("height", $("#myContainer").prop("height"));

按 DOM：

document.getElementById("myImg").height=
    document.getElementById("myContainer").height;

带有图像的浏览器 HTML 行为非常慷慨。这会直接将图像大小调整为容器，而不管容器的高度如何（包括使其更大 - 如果您不想要这种行为，您可能需要为此编写更多代码）

【讨论】：