Databases
StackOverflow2013
Postsdbo
POCaption not visible under image due to image size
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCaption not visible under image due to image size
    text
    copied!<p>I am currently trying to create an image slideshow with captions underneath. However, the images can be very large and (especially on smaller screens or tablets) sometimes they fill up the whole screen. This also means that the caption underneath falls off the page.</p> <p>Is there a way to automatically fix the image size so that it always leaves enough room for the caption underneath?</p> <p>This is the HTML of the offending element, if that helps:</p> <pre><code>&lt;a class="highslide" id="thumbnail1" href="/uploads/tx_extsluiter/m3d-server.png" onclick="return hs.expand(this, new captionId( 'galleryF' + 8, 'gallery8-1-caption') )" &gt;&lt;img src="typo3temp/pics/b21b5af80c.png" width="235" height="133" border="0" alt=""&gt;&lt;/a&gt; &lt;div style="display: none" class="highslide-caption" id='gallery8-1-caption'&gt;&lt;div&gt;&lt;p class="bodytext"&gt;Hallo, dit is afbeelding 1&lt;/p&gt;&lt;/div&gt;&lt;/div&gt; &lt;a class="iteminfo viewlarge" onclick="document.getElementById('thumbnail1').onclick()" &gt;+&lt;/a&gt; &lt;a class="iteminfo viewtooltip tooltip" title="&amp;lt;p class=&amp;quot;bodytext&amp;quot;&amp;gt;Hallo, dit is afbeelding 1&amp;lt;/p&amp;gt;"&gt;i&lt;/a&gt; </code></pre> <p>I have moved the div directly after the A. It seems that it is now working properly when calculating the height of the image in a high vertical low horizontal browser window, but when using a very wide and low window, the image gets too high. It will fill the whole height of the window, leaving no room for the caption.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload