Bits of .NET

These 3 lines will save you (fit, line up, remove background):

aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode:color-burn;

Let’s see how you can use that:

In the body section, we have a div with the “photoDiv” class.

<div class="photoDiv">
  <img src="1.png">
  <img src="2.png">
  <img src="3.png">
  <img src="4.png">
  <img src="5.png">
</div>

And here is the magical CSS:

<style>
.photoDiv img
{
  width: 15%;
  aspect-ratio: 3/2;
  object-fit: contain;
  mix-blend-mode:color-burn;
}

.photoDiv
{
  background: #dfdfdf;
  padding: 20px;
}
</style>

It will line up your images and fit into the container and finally, it will remove the background perfectly.

Thanks to Wes Bos for that perfect CSS Tip.

🔥 Three CSS tips for working with inconsistently sized logos pic.twitter.com/OdELwCQ77X

— Wes Bos (@wesbos) November 29, 2022