A part of the image is not showing up-CodePudding

This what i am doing to load an image. Image has to be a header on the webapp. But a part of image is visible and the other part is not.

import abc from './abc.svg';
// import './TopHeader.css';

console.log(abc);

function TopHeader() {

    return (
        <header>
            <img src={abc} className="abc" style = {{ height:100, width:200 }} />
        </header>
    )
}

export default TopHeader;

Image shows up as below - there is a part that is not showing up

CodePudding user response：

You should use object-fit: contain to make the entire image show up while the aspect ratio is maintained.

CodePudding user response：

I am not a javascript/reactjs dev. But, I think its because you are hardcoding or in other terms, specified the exact dimensions of an image while the image might have different dimensions. I feel like there should be a fit type like centerfit, scale, topfit, etc. that define how to fit the image into that image frame.