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