StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would suggest using the <code>table</code> and <code>table-row</code> values of the <code>display</code> property for this.</p> <p>The image-wrapper and text elements are both table rows, and so expand to fill the total area of the table. The image-wrapper is set to height 100%, so it consumes the left over space.</p> <p>The image element is nested within the image-wrapper and is set to width/height 100%, so it takes on the same dimensions as its parent.</p> <p>Here is a fiddle: <a href="http://jsfiddle.net/8S6Kf/1/" rel="nofollow">http://jsfiddle.net/8S6Kf/1/</a></p> <p><strong>HTML</strong></p> <pre><code><div class="parent"> <div class="image-wrapper"> <img class="image" src="http://placehold.it/250x250&amp;text=2" /> </div> <div class="text"> A line of text. </div> </div> </code></pre> <p><strong>CSS</strong></p> <pre><code>.parent { display: table; height: 250px; width: 250px; } .image-wrapper { display: table-row; height: 100%; } .image { width: 100%; height: 100%; } .text { display: table-row; } </code></pre> <p><strong>Update</strong></p> <p>This doesn't work on FF/IE. For this particular problem, you can replace the actual image with a div and use the background-image property. Note you also have to make the image a table-cell; or else ie won't render the table.</p> <p>Here is an example that does not stretch the image.</p> <p><a href="http://jsfiddle.net/8S6Kf/7/" rel="nofollow">http://jsfiddle.net/8S6Kf/7/</a></p> <p>HTML</p> <pre><code><div class="image"></div> </code></pre> <p>CSS</p> <pre><code>.image { display: table-cell; height: 100%; width: auto; background-image: url(http://placehold.it/250x250&amp); background-size: 100% 100%; } </code></pre> <p>If you want to preserve the dimensions of the image, you can alternatively use these background properties:</p> <pre><code>background-size: contain; background-repeat: no-repeat; </code></pre>

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