title: How to show only the top portion of an image with CSS?
body: <p>If an image is taller than 115 px, I'd like to only show the top 115px in a square container.  I'm trying this with the following:</p>
  
  <p><a href="http://jsfiddle.net/3mRh9/" rel="noreferrer">http://jsfiddle.net/3mRh9/</a></p>
  
  <p>But I still see the whole image.  How can I always show only the top portion of an image using only CSS?</p>
  
  <p>Code: </p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="floated"&gt; 
          &lt;a class="limited"&gt;
              &lt;img src="http://change.gov/page/-/officialportrait.jpg"/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .floated {
      border: 1px solid blue;
      float: left;
  }
  .limited {
      width: 115px;
      height: 115px;
      overflow: hidden;
      border: 1px solid red;
  }
  img {
      max-width: 115px;
  }
  </code></pre>