Inline Editor — Making an image fill the screen horizontally

This is a tip for using the inline editor to format an image. Most commonly, this tip applies to editing full page input, such as the initial home pages, though the concepts apply anywhere you can insert an image using the inline editor.

An inserted image will initially be set to a fixed size. Often it is more desirable to make the image scalable (say 50% or 100% of the screen width) so it remains fully visible regardless of the width of the browser.

Additionally, the image is subject to the container's padding and margins so getting an image to go edge-to-edge requires a second step.

Here are to necessary steps:

  1. Insert the image using the editor.
  2. Select the image, and click the Insert/Edit image button on the editor toolbar to bring up the image popup. edit image button
  3. Using the "Advanced" tab in the popup, set the style to
    width: 100%; height: auto;
    Be sure to include the colons and semi-colons (spaces are optional.) edit image popup

The will result in the image being force the image to fill all of the available space horizontally, yet will maintain the correct proportions. Don't worry about the height / width on the "General" tab of the image popup -- that can remain the original pixel size.

Scaling image example

(You may be tempted to try something like height:50% so the image takes up half the vertical: Don't. Webpages, conceptually, have infinite length, so setting a percentage is meaningless.)

However, you may notice there remains a margin surrounding the image. If you want it to get edge-to-edge, you'll need to directly modify the HTML code.

  1. Click on the "Source code" button on the toolbar. edit source button
  2. In the Source Code popup, you'll want to add code immediately around the IMG. (The blank lines in the example are not significant: just for illustration.):
    <div style="margin: -2em -2em 0;">

    </div>

    edit source popup

    There may be additional code already there surrounding the <img>, such as <p> or <span>. If so, remove it, so as to not interfere with the new code.

    The added margin code expands the image to the top (removing the top margin) and to the two sides. The bottom margin remains zero, so text you add below will start under the image as desired.

There is one more trick. With the described changes, you'll find that adding text under the image will result in that text being flush to the left border, due to the fact that we negated the margin.

The problem is that with the editor, you'll be adding text within the added <div>. The trick is to go back to the Source Code popup and enter some placeholder text under the final </div>. Then, when you close the Source Code popup, you'll see the placeholder text in the correct place. Select and edit that text and continue with other edits under the image.

Merced River

See also:

Search:


Was this information helpful?
 
Suggestions for improvement?

Still need help?

Loading...