I have an SVG image that must be imported. The original image is too big so it must be made smaller.
This is the image added in code:
render() {
return (
<div>
<Grid>
<img src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:
So how can this be done in code?
I added it like inline CSS but doesn't work:
render() {
return (
<div>
<Grid>
<img style={{ heigth: '10%' }} src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Tried with saving it in a css file and import it with className='myClassName', same, no changes. The image has the original size.
How can this be done?
You might have a typo:
// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>
.imgClassName {
height: 10%;
}
<div>
<Grid>
<img className="imgClassName" src={mySvgImage}></img>
</Grid>
</div>
Related
Im trying to make image to fit a div.
Im using react-slideshow-image.
this is the CodSandbox :
https://codesandbox.io/s/react-slide-imageshow-heightproblem-mforb?file=/src/App.js
return (
<div className="App">
<div style={{ width: "30%", height: "70px" }}>
<Slide ref={this.slideRef} {...properties}>
{slideImages.map((each, index) => (
<img style={{ objectFit: 'contain', height : '100%'}} src={each} key={index} alt="sample" />
))}
</Slide>
</div>
</div>
I want the images to fit the div , so i can make the div responsive.
if the div height is 70px, so the images inside it will also be the same height:70px
I have tried this How to make an image fit the carousel?.
I have noticed that the <Slide > add divs so i looked at the docs and saw that you can add a property called cssClass that gets a string:
Use this prop to add your custom css to the wrapper containing the sliders. Pass your css className as value for the cssClass prop
but it doesnt seems to work and i didnt found any examples for it.
All I want to do is show a product image exactly how ebay does:
Their product image aspect ratio remains the same with white space to fill in the remaining space in the container div. From what I understand, the purpose of objectFit: 'contain' is meant exactly to do this but I can't seem to figure it out. Below are my Material-UI components and CSS stylings. I believe the container class is correct, but how what should height and width of CardMedia be? I've tried max-width and max-height and some other attempts, but can't for the life of me figure this out.
const useStyles = makeStyles({
imageContainer: {
height: '400px',
width: '400px',
margin: 'auto'
},
media: {
height: '400px',
objectFit: 'contain',
},
})
function ProductDetails() {
return (
<Grid container spacing={2} >
<Grid item xs={12} md={6}>
<Card className={classes.imageContainer}>
<CardMedia
className={classes.media}
image={'https://i.ebayimg.com/images/g/23AAAOSwZrJgJHIg/s-l1600.jpg'}
/>
</Card>
</Grid>
</Grid>
)
}
I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```
The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.
Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />
I have a simple antd modal divided using the Row and Col grid. The Modal expands as needed if I put some content in it on one side, however on the other side I have a map displayed using google-maps-react.
The issue here is, I would like the map to be a certain size, but when there is little content, it overflows the modal and looks silly.
This is what my code currently looks like:
export function MyModal () {
return (
<Modal>
<Row>
<Col lg={12}>
[MY CONTENT]
</Col>
<Col lg={12}>
<div>
<Map google={google}
initialCenter={{ lat: 45.42, lng: -75.69 }}
zoom={14}
style={{ width: 420, height: 400 }}
/>
</div>
</Col>
</Row>
</Modal>
)
}
When MY_CONTENT does not have much, the map overflows the modal and looks like this:
However when I am filling in the other side of the modal with content, it naturally expands. So I don't understand why the map does not expand it.
Anyway the question is how can I make the right side of the modal also expand as much as necessary so that the map fits in it?
Thanks!
Edit: I created a code sandbox so the antd components could be seen. Unfortunately I don't know how to do this on SO's code snippet editor.
Turns out this was because my Map component was an iframe.
I learned that when this is the case, it doesn't bring in its own width and height, so the parent div thinks it's all 0 or something like that.
The solution was for me to put a width and height on the div. Since this is static on the map anyway, it isn't a problem. So now my code looks like this:
export function MyModal () {
return (
<Modal>
<Row>
<Col lg={12}>
[MY CONTENT]
</Col>
<Col lg={12}>
<div style={{ width: 420, height: 400 }}>
<Map google={google}
initialCenter={{ lat: 45.42, lng: -75.69 }}
zoom={14}
style={{ width: 420, height: 400 }}
/>
</div>
</Col>
</Row>
</Modal>
)
}
i using the semantic-ui-react. I have a Container main which has an Segment inside for show page details. but this Segment's height is changing according content inside. i want to set an mix height to alway stay fixed size. here is my code:
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Header />
<Segment />
</Container>
</div>
);
}
}
You can set minHeight style/css on your component or any div inside :
<Segment style={{ minHeight: 15 }} />