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

user_179454 0
Viewed 52565

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.

css html
5 Answers

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

user_3766910

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')"/>
user_4442550
Related