MobileRead Forums - View Single Post - What image height causes images to fill the screen?

Jeff L · 01-04-2012, 12:42 AM

To keep objects together, enclose them within a DIV or P tag and use inline-block.

That is,

In your CSS, have something like this:

.image-and-caption {

display:inline-block

}

Then in your html:

<div class="image-and-caption">
<img alt="text" src="image1.jpg" style="height:90%; text-align:center;"/>

<p>Caption text</p>
</div>

Leaving the "height" at 90% (or whatever is appropriate) will leave enough room for your caption text.

01-04-2012, 12:42 AM	#7
Jeff L Zealot Posts: 117 Karma: 584308 Join Date: Oct 2010 Location: San Francisco Device: Kindle	To keep objects together, enclose them within a DIV or P tag and use inline-block. That is, In your CSS, have something like this: .image-and-caption { display:inline-block } Then in your html: <div class="image-and-caption"> <img alt="text" src="image1.jpg" style="height:90%; text-align:center;"/> <p>Caption text</p> </div> Leaving the "height" at 90% (or whatever is appropriate) will leave enough room for your caption text.