如何調整圖像大小以適應按鈕按下時的容器高度？

Question

所以我試圖通過為漢字添加筆順圖來調整我的 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

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

Answer 2

將圖像高度與容器匹配

通過 jQuery：

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

通過 DOM：

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

瀏覽器 HTML 對圖像的行為非常慷慨。 這會直接將圖像大小調整為容器，而不管容器的高度如何（包括使其更大 - 如果您不想要這種行為，您可能需要為此編寫更多代碼）