Question

We know how to use CSS to show only part of an image within a div (i.e., image sprites), but the image has to be a background image.

We know how to use CSS to scale an image, but the image has to be an IMG.

Does anyone know of a way to scale and image and show only part of it?

For example, I want to:

1. show pixels (15,15) through (100,100), and
2. scale it up by 200%.

The first I can do by making in a background image. The second I can do by making it a foreground image. But so far, I have not ascertained how to do both. Is it even possible using only CSS/HTML?

Answer 1

You could scale the image just as you would normally. Then, use a container div to crop the image. To set where the crop rectangle goes, use position: relative on the image (not the containing div). Here’s an example using stackoverflow’s logo:

<style type="text/css">
div {
    /* Set size of crop area. Setting its location happens bellow. */
    width: 150;
    height: 100;
    overflow: hidden;  /* Crop it like it's hot! */

    /* not part of the implementation; only to display what's going on */
    border: 1px solid black;
    background-color: #ddd;
}

img {
    /* Set the crop location by shifting the image
     * up by 70px and to the right by 30px.
     */
    position: relative;
    top: -70px;
    left: 30px;

    /* Scale the image as you normally would. */
    width: 300px;
    height: 150px;
}
</style>

<div>
  <img src="http://sstatic.net/so/img/logo.png">
</div>