Why is image coming out blurry?-CodePudding

I have the following image that Im trying to display under my navigation bar.

The image dimensions are 234 x 156 px

For some reason, the image is coming out blurry and the entire image cannot be seen. Is it because its too small to begin with in terms of height/width? or some other factor?

Here is the code snippet that displays the image:

 <div >
          <img
              src="../images/cars.png" alt= ""
              class= "h-48 w-full object-cover" />
    </div>

CodePudding user response：

Assume you're on tailwind. Try a defined dimension

 <div >
      <img
          src="../images/cars.png" alt= ""
          class= "h-48 w-72 object-cover" />
</div>

or object-contain


     <div >
          <img
              src="../images/cars.png" alt= ""
              class= "h-48 w-full object-contain" />
    </div>

to narrow down the cause to css sizing instead of other issues

CodePudding user response：

h-48 w-full classes set the size of the image box (the rendering area). This box will have a height of 12rem (192px) and a width equal to its parent's.

In this box, .object-cover zooms the image in (or out, if it would be too big), without changing pixel aspect ratio, to the minimum size where the image covers the entire box.

If the box is proportional with the initial size of the image, the image is not cropped. If the box is not proportional, the image is cropped on the sides which exceed the box area.

In your case, (guessing the size of the parent is fairly large - e.g: ~1000 - 1200px) the image is zoomed in until the image width is equal to the box width and the crop the excess (from top and bottom).

Which, most likely, makes the image pixelated, considering its enlarged 3-4 times. Removing object-cover class will help you visualise the explanation above.

If you want to include the image in the box without cropping it, replace object-cover with object-contain class.