Any ideas on how to fix image sizing without changing the original image-CodePudding

I have a avatar image for company logos. I want it to be round but due to sizing of the images it cuts off some of the image. I have thousands of these logos and I am looking for any Ideas on how to fix this.

The Ideal end result would be the logo centered in the circle with the least amount of overlap. I though about just adding extra background space and making the image smaller unfortunately the logos have different color backgrounds. Thanks for your time!

CodePudding user response：

div {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  outline: 2px dotted black;
  overflow: hidden;
}

img {
  height: 100%;
}

<div>
  <img src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg" alt="logo">
</div>

CodePudding user response：

Use object-fit: cover.

Example:

img {
   width: 200px;
   height: 300px;
   object-fit: cover;
}

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

The object-fit property can take one of the following values:

fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit

contain - The image keeps its aspect ratio, but is resized to fit within the given dimension

cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

none - The image is not resized scale-down - the image is scaled down to the smallest version of none or contain