Portland Community College | Portland, Oregon Portland Community College

Sizing and alignment

Images on the website are one of four different sizes – 100%, 50%, 25%, or thumbnail – and use one three different alignments – left, right, or center.

Note that you shouldn’t use one of these sizing or alignment classes to create text columns. Instead, learn about making Foundation columns.

Learn more about sizing and alignment in WordPress on Spaces.

100% width images

100% width images should be landscape (horizontal) orientation, and ideally no taller than 450px. Portrait (vertical) orientation images are too tall and take up too much space on the page when 100% width.

Alignment options
  • check Center – recommended for most images, should be landscape (horizontal) orientation
  • times Right and left – you can’t align an image to the left or right that is full-width!
Responsive behavior

These images are 100% width on desktops, tablets and phones.

Example

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Picture of a cat that is wide and not very tall. It stretches the full width of the text above and below it.

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • 100% width class: img class="size-percent-100"
  • Align center class: img class="aligncenter"

50% width images

50% width images can be either landscape (horizontal) or portrait (vertical) orientation, and can be any height.

Alignment options
  • check Right – recommended, can be either landscape or portrait orientation
  • times Left – only for special cases (like a logo), should be portrait orientation
  • times Center – only for special cases (like a logo), should be landscape orientation
Responsive behavior

These images are 50% width on desktops and tablets. They switch to the width of the image file (up to 100% the screen width) on phones. They are centered on small screens, regardless of alignment.

Example

Picture of a cat that is taller than it is wide, with text to the left of it.
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • 50% width class: img class="size-percent-50"
  • Align right class: img class="alignright"
  • Align center or left classes (special cases): img class="aligncenter" and img class="alignleft"

25% width images

25% width images can be either landscape (horizontal) or portrait (vertical) orientation, although portrait is ideal (landscape photos at this width will be very small).

Alignment options
  • check Right – recommended, should be portrait orientation (landscape is often too small)
  • times Left – only for special cases (like a logo)
  • times Center – centered images that are this small look silly
Responsive behavior

These images are 25% width on desktops. They switch to the width of the image file (up to 50% on tablets and 100% the screen width on phones) on medium and small screens. They are centered on small screens, regardless of alignment.

Example

Picture of a cat that is taller than it is wide, with text to the left of it.
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • 25% width class: img class="size-percent-50"
  • Align right class: img class="alignright"
  • Align center or left classes (special cases): img class="aligncenter" and img class="alignleft"

Thumbnail images

Thumbnail images can be used for things like biography images or logos. Don’t use the thumbnail size for regular images meant to show off your program or organization – they’re too small to display much detail.

  • Minimum image width: 150px
  • Minimum image width: 150px
Alignment options
  • check Right
  • check Left
  • times Center – centered images that are this small look silly
Responsive behavior

Thumbnail images never get larger than 150px wide or tall, even on small screens. However, they are centered on small screens regardless of alignment.

Example

Small, square picture of a cat

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • Thumbnail class: img class="size-thumbnail"
  • Align right class: img class="alignright"
  • Align left class: img class="alignleft"