Offset viewable image in

Question

Using plain tags is it possible to offset the image in the same way as you can with CSS background-image and background-position?

There are main images o

Answer 1

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!

Answer 2

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).

Answer 3

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.

Answer 4

Some of the images are portrait and some are landscape, however I need to display the thumbnails at a uniform size (and crop off the excess where it fails to meet the desired aspect ratio).

Use background-size: cover which should exactly solve that problem → with good browser support!

And make you image the background (probably using background-image as an inline style):

<img style="background-image: url('img/foo.png')"/>

Answer 5

Before

<img src="img.png"> Text, Links, Etc

After:

<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc

Read about Block-Formatting context on W3C.