Material-Ui-Next: Setting Image Size to Fit a Container

How to make image responsive in Material-UI

In your image tag, you are setting the height and width to 50vh. Viewport units (vh or vw) will cause stuff to overflow out of containers if it sees fit. In your case, everything is working as intended, the image is taking up 50% of the viewport height (637/2 = 319px). It's going to overflow out of the grid container if it needs to in order to meet those dimensions.

You should likely have the image itself have width: 100% height: 100%, or width: 100% height: auto and control the size of the image via the container (like you're already doing).

Hope this helped, let me know if you have questions.

React JS + Material UI : displaying N elements inside a container of variable width

You can deal with these kinds of problems using flex-box. Here I did a simple example just using a couple of properties that should fit our description: https://codesandbox.io/s/throbbing-cdn-cbb6mx?file=/src/App.js

In this link, you can find a very nice guide about flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to contain images in react material ui CardMedia component

To fit image in CardMedia, add props component="img" like:

<CardMedia
    className={classes.media}
    image={brand.image.length > 0 ? brand.image : knightdemon}
    title={brand.name}
    component="img"
/>

This should solve your problem.

---

Related Topics