現在、キャプションが下にある画像スライドショーを作成しようとしています。ただし、画像が非常に大きくなる可能性があり (特に小さな画面やタブレットでは)、画面全体に表示されることがあります。これは、下のキャプションがページからはみ出すことも意味します。
下のキャプションに十分なスペースを常に確保できるように、画像サイズを自動的に修正する方法はありますか?
これは、問題のある要素の HTML です。
<a class="highslide" id="thumbnail1" href="/uploads/tx_extsluiter/m3d-server.png" onclick="return hs.expand(this, new captionId( 'galleryF' + 8, 'gallery8-1-caption') )" ><img src="typo3temp/pics/b21b5af80c.png" width="235" height="133" border="0" alt=""></a>
<div style="display: none" class="highslide-caption" id='gallery8-1-caption'><div><p class="bodytext">Hallo, dit is afbeelding 1</p></div></div>
<a class="iteminfo viewlarge" onclick="document.getElementById('thumbnail1').onclick()" >+</a>
<a class="iteminfo viewtooltip tooltip" title="<p class="bodytext">Hallo, dit is afbeelding 1</p>">i</a>
div を A の直後に移動しました。縦が高く横が低いブラウザ ウィンドウで画像の高さを計算すると正しく機能するようになりましたが、非常に幅が広く低いウィンドウを使用すると、画像が高くなりすぎます。ウィンドウの高さ全体に表示され、キャプションの余地がなくなります。