CSS Cross Country Course - Level 6

Notes from Codeschool CSS Cross Country Course - Level 6

Image Issues

There are a couple ways to use images in your layout, as content or as part of your layout. Generally, items that need to be changed dynamically or frequently should be part of the content. Items that are a part of the base layout should be put in your CSS.

Here is an example, lets say you have products listed with images:

<!-- index.html -->
<h4>Rental Products</h4>
  <ul>
    <li class="snowmobile"></li>
  </ul>

/* styles.css */
.snowmobile {
  background: url(snowmobile.jpg);
  height: 300px;
  width: 400px;
}

This would be okay in the beginning, but it would be difficult to maintain, and you cannot dynamically alter the content or add alt tags to it. Instead of having the product image in the background, it should be a part of the content like this:

<!-- index.html -->
<h4>Rental Products</h4>
  <ul>
    <li><img src="snowmobile.jpg" alt="Snowmobile" /></li>
  </ul>

/* styles.css */
/* no special styles needed! */

Let's say you have a title followed by a line divider. You could put it in the HTML as content, but then you'd have to repeat the step every time you created a title. Not very D.R.Y.!

Not D.R.Y.:
<h1>Some Cool Title</h1>
<img src="divider.jpg" alt="divider" />

Instead, add the divider to the background of your <h1> tag.

<!-- index.html -->
<h1>Some Cool Title</h1>

/* styles.css */
h1 {
  background: url(divider.jpg);
  margin-bottom: 10px;
  padding-bottom: 10px;
}

Review

- Images as part of the layout should be background images (add to CSS)
- Images as part of the content should be inline images (add to HTML)

Image Cropping

Let's take an example where a user is uploading photos of different sizes.  The HTML looks like this:

<!-- index.html -->
<h4>Rental Products</h4>
  <ul class="rental">
    <li><img src="snowboard.jpg" alt="snowboard" /></li>
  ...

/* styles.css */
.rental img {
  height: 300px;
  width: 400px;
}

The top level has no cropping, the bottom level has a fixed height and width set on the image element causing image distortion

Here you see that the bottom row of images is squished due to the set height and width in the class definition. A better way to handle this, and to avoid distorted images, is to use the overflow crop method. Apply overflow: hidden to the parent container (not the image), and the image will not be distorted. 

<!-- index.html -->
<h4>Rental Products</h4>
  <ul class="rental">
    <li class="crop"><img src="snowboard.jpg" alt="snowboard" /></li>
  ...

/* styles.css */
.crop {
  height: 300px;
  width: 400px;
  overflow: hidden;
}

The top level shows the distorted images again, the bottom level how the images look when the parent container has overflow: hidden

Doing this way is fine, but it is still not perfect because part of the images is cut off. To fix this, apply a CSS style to resize the image as well. We will set width to 400px, and then the height will automatically calculate.

/* styles.css */
.crop {
  height: 300px;
  width: 400px;
  overflow: hidden;
}

.crop img {
  height: auto;
  width: 400px;
}

The top level is overflow: hidden again, the bottom level shows what happens when you resize and image in CSS

This is a good fix, but unfortunately won't work for images that are portrait oriented instead of landscape. For portrait oriented images you would set a max height, and the width to auto like this:

.crop img {
  height: 300px;
  width: auto;
}

But what do you do if you have both landscape and portrait images? In this case you could either crop them to be square (just make sure your max height and width are less than the size of the original image). You could resize the images server side, or your could crop them before uploading. If you are dealing with fluid or responsive layouts, visit this link for more information on dealing with images: http://clagnut.com/sandbox/imagetest.