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

Question

Using plain <img> 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 on the page and it makes little sense to have separate thumbnails when both will be loaded (thus increasing bandwidth). 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).

Although this is possible using other tags and background- CSS values the use of plain <img> tags would be preferable.

Answer 1

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 2

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!