CSS to display bitmap, resized keeping aspect ratio, cropped to a circle

I want to show the avatar of a user in the menu bar of my Blazor (server side) app. So I use <img> to display the bitmap. But I need to do two things with the image.

First, resize it to 24x24, keeping the aspect ratio and no cropping. So if I am given an image that is 64x32, then it sizes it to 24x12, centered in the display area, with the background color for the 24x6 on either side of it.

Second, crop it to a circle where everything outside the circle in the 24x24 area is the page background.

I'm 98% certain this can be done with css but everything I've tried has been a mess.

Background positioning and sizing is a powerful tool in browsers. You can always:

• put the image in the background,
• size it so it is always contained inside the element (hence no cropping)
• center the background image (so if it's smaller than the element size you specified or it has a different aspect ratio, it's still visible properly)

For some sketchy browsers, you can add a transparent PNG image as the image src, so it doesn't show a broken image placeholder (that's the data URL in the src).

For the circled effect with transparent areas around the circle, use border-radius. A 50% border radius will result in a circle, when you have equal length sides.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.resizable-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.circled {
  border-radius: 50%;
}

.s-32 {
  width: 32px;
  height: 32px;
}

<!-- language: lang-html -->

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="resizable-image circled s-32" style="background-image:url('https://i.stack.imgur.com/e33ew.jpg?s=64&g=1')" />

<!-- end snippet -->

Update:

Same thing with src attribute and CSS object-fit and object-position:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.resizable-image {
  object-fit: contain;
  object-position: center center;
}

.circled {
  border-radius: 50%;
}

.s-32 {
  width: 32px;
  height: 32px;
}

<!-- language: lang-html -->

<img class="resizable-image circled s-32" src="https://i.stack.imgur.com/e33ew.jpg?s=64&g=1" />

<!-- end snippet -->

Update 2

Advantages/disadvantages of the two solutions, regarding the use case in this question:

While I listed these as advantages and disadvantages, it is true only when these technologies are used what they were intended for (which we don't always do).

Background image solution

• Advantages:
  • supported by every graphical browser in existence
  • mature technology, no bugs
• Disadvantages (In some cases they may be advantages, depending on what would you'd like to achieve)
  • The images used in this way will not be printed
  • The images used in this way won't be indexed by search engines
  • If not properly labelled (title, alt), screen readers will ignore them

Src solution

• Advantages:
  • Printed
  • Indexed in search engines
• Disadvantages
  • While the technology has matured in the past few years, it's still not supported in older browsers. A particular browser of interest is Internet Explorer and older versions of Safari
  • If your target audience is known to be using outdated browsers, this solution is a deal breaker (as it simply doesn't work, or may be buggy)

Conclusion

If you don't care about older browsers or printing/SEO is important consideration, the src/object-* version should be used. This technology is working the way it is intended when working with contextual images.

If legacy browser support is a must, then the background image solution should be used (as the src solution won't degrade gracefully).