The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page. Sizing the <img> via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.
Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) only and define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.
Finally, there are times when you may not know the image size ahead of time (image src might be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.
The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.