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 of 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 columns. And vice versa, don’t use columns to align images.

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.

100% alignment options
  • Yes: Center: Recommended for most images, should be landscape (horizontal) orientation.
  • No: Right and left: You can’t align an image to the right or left that is full-width!
100% responsive behavior

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

100% development info
  • Stylesheet location: /_source/styles/components/_images.scss
  • In WordPress, choose “Align center” and “Size: 100%” in the “Add Media” window or when editing an image on a page.
    • Your image will need to be at least 1000px wide. If it’s smaller, “Size: 100%” won’t show up in the options.
    • Learn about adding images in WordPress in Spaces.
  • 100% width class: <img class="size-percent-100">
  • Align center class: <img class="aligncenter">
100% 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.

50% width images

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

50% alignment options
  • Yes: Right: Recommended, can be either landscape or portrait orientation.
  • No: Left: Only for special cases (like a logo), should be portrait orientation or square.
  • No: Center: Only for special cases (like a logo), should be landscape orientation.
50% 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 or size.

50% development info
  • Stylesheet location: /_source/styles/components/_images.scss
  • In WordPress, choose “Align right” and “Size: 50%” in the “Add Media” window or when editing an image on a page.
    • Your image will need to be at least 500px wide. If it’s smaller, “Size: 50%” won’t show up in the options.
    • Learn about adding images in WordPress in Spaces.
  • 50% width class: <img class="size-percent-50">
  • Align right class: <img class="alignright">
50% 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.

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).

25% alignment options
  • Yes: Right: Recommended, should be portrait orientation (landscape is often too small).
  • No: Left: Only for special cases (like a logo).
  • No: Center: Centered images that are this small look silly.
25% responsive behavior

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

25% development info
  • Stylesheet location: /_source/styles/components/_images.scss
  • In WordPress, choose “Align right” and “Size: 25%” in the “Add Media” window or when editing an image on a page.
    • Your image will need to be at least 250px wide. If it’s smaller, “Size: 25%” won’t show up in the options.
    • Learn about adding images in WordPress in Spaces.
  • 25% width class: <img class="size-percent-25">
  • Align right class: <img class="alignright">
25% 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.

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. WordPress crops thumbnail images to square regardless of the orientation.

  • Minimum image width: 150px
Thumbnail alignment options
  • Yes: Right
  • Yes: Left
  • No: Center: centered images that are this small look silly
Thumbnail 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.

Development info
  • Stylesheet location: /_source/styles/components/_images.scss
  • In WordPress, choose “Align right” or “Align left” and “Size: Thumbnail” in the “Add Media” window or when editing an image on a page.
    • Your image will need to be at least 150px wide. If it’s smaller, “Size: Thumbnail” won’t show up in the options.
    • WordPress will crop the image to a square, so either upload a square image or make sure the important part of the image is in the center.
    • Learn about adding images in WordPress in Spaces.
  • Thumbnail class: <img class="size-thumbnail">
  • Align right class: <img class="alignright">
  • Align left class: <img class="alignleft">
Thumbnail 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.