When attempting to resize an image using React, I am encountering a problem where adjusting the height and width of the tag with useStyles does not reduce the size of the image but instead moves it around on the page.
Here is the code snippet:
import { makeStyles } from "@material-ui/core/styles";
import { SvgIcon, Typography } from "@mui/material";
import { Icon } from "@mui/material";
const useStyles = makeStyles((theme) => ({
pageContainer: {
display: "block",
marginTop: 120,
justifyContent: "center",
alignItems: "center",
},
logo: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "50%",
height: "50%",
},
info: {
display: "block",
justifyContent: "center",
alignItems: "center",
},
iconContainer: {
display: "flex",
height: "20vh",
width: "auto",
},
}));
const teamNames = [
"Name1",
"Name2",
"Name3",
"Name4",
];
export default function () {
const classes = useStyles();
return (
<div className={classes.pageContainer}>
<div className={classes.logo}>
<img src={process.env.PUBLIC_URL + "/myLogo.png"}></img>
</div>
<div className={classes.info}>
<Typography variant="h3" display="block" align="center">
About the Team
</Typography>
{teamNames.map((personName) => (
<Typography variant="h5" display="block" align="center">
{personName}
</Typography>
))}
</div>
</div>
);
}
The issue seems to be puzzling me as all I want is to proportionally shrink the image and center it on the page.