[SOLVED] Trying to resize an Image to fit on a Nav Bar in CSS without disturbing all other elements on the page

Trying to resize an Image to fit on a Nav Bar in CSS without disturbing all other elements on the page

I am trying to fit this image into a Nav Bar like where a logo would be. I tried to use the float left and transform scale properties but the image is really big and it I think it still holds the container space from the original size. How I reduce the size without pushing all the other elements around? Any help is appreciated.

Solution

The MDN article on images covers many ways to handle this. You could target the img element and limit it to the size of the container or whatever it is appropriate in your case, for example:

img {
  max-width: 100%;
}

I've used img directly, but you'd probably use a class. One important point though, is that if you control the image, it might be better to resize the actual source, so that bandwidth is not wasted by downloading an unnecessarily large file.