Skip to main content
King County logo

Images in the new templates are responsive by default. That means they will resize to fit their containers.

Responsive images

This image is 767 pixels x 263 pixels, but because it is responsive by default, it will resize to it's 4 column container.

View of Pike Place Market

Non-responsive images

In rare cases, you might need an image to not be responsive. An image map is an example of such a case. This is the same image with the class img-non-responsive added to it. See how it runs off the page because it has not resized to its container.

Images in addons

Images will resize to match their containers. If you place an image directly into a two or three column addon, it will scale down to fit the addon column.

Resize your browser window to see how the images below will resize to fit the columns in the addon.

park trees

tugboat and Mount Rainier

Concert crowd



Note that images will scale down smaller to fit their container, but they will not scale up to fill a larger container. They will stop scaling when they hit their original size. For instance, the three column images will not fill the width of a high resolution cell phone screen because the original image is only 255 pixels wide.

If you need to change the size of an image, free online tools like let you crop, resize and more.

If you need to reduce the file size of an image, free online tools like optimizing images for the Web.