Image seems to look compressed even though it has enough pixels to look good-CodePudding

So I'm trying to embed an image in my react app and I'm struggling with sizing and quality. My image is like 1800x900 pixels and I only need the image to be like 300x150 which makes it reasonable for me to think there will be no problems with its quality. But then I upload my photo to imgbb and place the link in the src attribute and it looks full on blurry on my webpage.

What's weirder is that if I zoom in using my trackpad on my laptop, it regains quality and I see that its not actually blurry. So what am I doing wrong exactly? Is it the way I'm linking my image, the way I'm sizing it?

<ProjectImage src="https://i.ibb.co/TRbML9h/financee.jpg" alt="financee" />

const ProjectImage = styled.img `
  width: 290px;
  height: 154px;
  border: 1px solid black;
`

CodePudding user response：

Add object-fit: contain; that will adjust image according to parent div or respected image size

More Properties:

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

CodePudding user response：

It looks normal to me I think, but my 20/20 days are long gone

https://stackblitz.com/edit/react-lkkkwk

It is a pretty large image that is being super compressed