Advanced Images

Section 1: Figures and figcaption

The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The <figcaption> element defines a caption for a <figure> element, and can be placed as the first or last child of the <figure> element.

• Both the image and the figcaption must be placed inside a <figure> tag.
• The <figcaption> element is optional and can appear before or after the content within the <figure>. Where you place the <figcaption> in the <figure> determines where it appears in the rendered page.
• Here is an example of the code with the caption on the bottom:

  <figure>
  <img src="figures/pigHula.jpg" alt="This is an image of Hula pig.">
  <figcaption>Pig from <cite>Pearls Before Swine</cite>
  doing the hula.</figcaption>
  </figure>

  And here is the result:

  

• Here is an example of the code with the caption on top:

  <figure>
  <figcaption>Pig from <cite>Pearls Before Swine</cite>
  doing the hula.</figcaption>
  <img src="figures/pigHula.jpg" alt="This is an image of Hula pig.">
  </figure>

  And here is the result:

  

• If you want to make the caption approximately the same size as the image, you will want to specify the width of the figure container. Intrinsic sizing determines sizes based on the contents of an element, without regard for its context. Hence, you can use intrinsic width to set the size of the figure to the size of its contents (the image).

  figure.intrinsic
  {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  }

  And here is the result (with added border):

  

Section 2: More on Centering Images

You should recall that centering images requires that you set the display property to "block" and set the left and right margins to "auto".

display:block;
margin-left:auto;
margin-right:auto;

You also probably want to style the caption.

figure.centered
{
margin: 0px auto;
}
figcaption.centered
{
font-size:.7em;
color:black;
text-align: center;
}
figure.centered img
{
display:block;
margin-left:auto;
margin-right:auto;
}

<figure class="centered">
<img src="figures/pigHula.gif" alt="Hula pig." >
<figcaption class="centered">Pig doing the hula.</figcaption>
</figure>

And here is the result:

You can even use intrinsic sizing and still center the minimally sized figure.

figure.centered2
{
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
margin-left:auto;
margin-right:auto;
}

Here is the result:

Resources

• HTML5 figure and figure caption elements
• http://designshack.net/articles/css/how-to-center-anything-with-css/

Section 3: More on Image Size

Recall that to display a full-size image it is usually adequate to specify only the width in units like pixels or ems, but if you specify the width using a percentage, the browser will interpret that as the percentage of the container in which the image is placed, not as a percentage of its natural size.

There is a new sizing approach in CSS called "intrinsic".

• Intrinsic sizing determines sizes based on the contents of an element, without regard for its context.
• Read more here.

Here is an example from StackOverflow:

figure
{
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
img
{
width: 50%;
}

<figure>
<img src="example.png" alt="example image.">
</figure>

Here is a quarter-size pig:

Compare it to the full-size pig:

Intrinsic sizing is not available in many browsers: link.

Section 4: CSS for Images: Layout

float property

The float property allows text to flow around other elements.

• If we have an element we want on the right, with text flowing on its left, we use the default text-align value (left) for the text and the right value for float on the element we want on the right.

  .alignRight
  {
  float: right;
  }

  <img class="alignRight" src = "deweyFace2.jpg" >

• See this link for demo above.
• More on float here and here. And the CSS3 spec, which refers back to the CSS 2 spec.
• If you do not want text to flow around the floated element, you can apply the "clear" property to these following elements.
  • The four options are "clear: left", "clear: right", "clear: both" or "clear: none".
  • Get more details here.

Section 5: CSS for Images: Margins

Margins can be used to prevent text from abutting an image.

<img class="floatLeft" src = "annieFace.gif" >

.floatLeft
{
float: left;
margin-right: 0.75em;
margin-bottom: 0.3em;
}

See this link for the demo above.

Section 6: CSS for Images: Background

The background properties include color, image, repeat, position, and attachment and apply to various elements (body, paragraph, table, etc.) W3C Link

• The background-color property sets the background color of an element.
• The background-image property specifies an image to use as the background of an element
• The background-repeat property sets if or how a background image will be repeated.
  • By default, the background-image property repeats an image both horizontally and vertically.
  • repeat: tile the image in both directions. This is the default value.
  • repeat-x: tile the image horizontally
  • repeat-y: tile the image vertically
  • no-repeat: don't tile, just show the image once
• The background-position property sets the starting position of a background image.
  • The default values are 0 0, which places the background image at the top left of the container.
  • Possible values: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, or xpos ypos
• The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
  • Values include scroll or fixed.
  • Here is an example.

Section 7: Image Compression and Optimization

If you did not read the Graphic Design notes, you should at least review Image Compression and Image Optimization.