Offset viewable image in <img> tags the same way as for background-image

If you put the image in a div you can use the margins to move the image around. This particular example use a sprite image logo for the home link that changes position on hover. You could also skip the A tag and move the image around using the margin attribute on #logo img.

The HTML:

<div id="logo">
    <a href="#">
        <img src="img/src.jpg" />
    </a>
</div>

The CSS:

#logo { 
    display: block; 
    float: left; 
    margin: 15px 0; 
    padding: 0;
    width: 350px; //portion of the image you wish to display
    height: 50px; //portion of the image you wish to display
    overflow: hidden; //hide the rest of the image
}
#logo img {
    width: 350px; 
    height: 100px; // you'll see this is 2x the height of the viewed image
    padding: 0; 
    margin: 0;
}
#logo a { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
}
#logo a:hover { 
    margin-top: -50px;  //move up to show the over portion of the image
}

Hope that helps!

This is an old question, but it was the first one that came up when I googled the question, so I thought I would mention the answer that, in my opinion, actually solves the original problem how to emulate background-position attribute. The answer I found is to use CSS attributes object-position and object-fit. For example like this:

<img src="logos.png" style="object-fit: none; object-position: -64px 0; width: 32px; height: 32px" />

This will show the third thumbnail in the first row (assuming the thumbnails are arranged in a regular grid 32 x 32 pixels).

Unfortunately no, it's not possible with only an <img> tag. There are 2 solutions I can think of to your problem:

CSS background-image

Create a <div> where the image is applied as a background-image property:

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>

CSS clipping

Use the clip-path property to only show a section of the image:

<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points -->
<div style="clip-path: inset(10px 200px 200px 10px)">
    <img src="an-image.jpg">
</div>

You can read more about it in this article.