所以我试图通过添加汉字的笔顺图来调整我的 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}}
是对生成图表图像的卡片字段的引用。在上面的示例中,它包含两张单独的图片,每个汉字一张) .
更新:将示例分享为可下载的套牌,如果您想尝试一下:
最佳答案
对于任何在未来寻找类似东西的人,这里是最终代码:
<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>
关于javascript - 如何调整图像大小以适应按下按钮时的容器高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58936508/