Code School

Background Images.html

   <a class="more" href="#">More Information</a> 
   
   //css
   .more {
      background: #c09d78 url(arrow.png) right no-repeat;
      display: block;
      position: relative;
      padding: 0 50px;
    }

Content Images.html

<figure> <img src="wovenwonder.jpg" alt="The Woven Wonder "/></figure>


//css
figure {
  border: 2px solid #c5c9cf;
}

Image Crop.html

<section class="content about">
      <h1>Our Store</h1>
      <ul class="store">
        <li>
          <img src="store1.jpg" alt="Our Store" />
        </li>
        <li>
          <img src="store2.jpg" alt="Our Store" />
        </li>
        <li>
          <img src="store3.jpg" alt="Our Store" />
        </li>
        <li>
          <img src="store4.jpg" alt="Our Store" />
        </li>
      </ul>
    </section>
    
    
    //css
    .store li {
      height: 150px;
      width: 150px;
    }
    
    .store li {
      height: 150px;
      width: 150px;
      overflow: hidden
    }

Landscape Image.html

.store li {
  height: 150px;
  width: 150px;
  overflow: hidden;
}
.store li img {
  height: auto;
  width: auto;
}

Portrait.html

.store li {
  height: 150px;
  width: 150px;
  overflow: hidden;
}
.store li img {
  height: auto;
  width: 150px;
}