I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:
Also upon resizing, some images get cut as well:
This is the code for the CardMedia part:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={product.img_urls[0]}
alt={product.name}
title={product.name}
sx={{ padding: "1em 1em 0 1em" }}
/>
// Other Content
</Card>
Overall, I want to achieve something like this but with all the cards in the same height and width:
Is there any way I can fix this or do I need to resize each image individually?
You need to make your pictures to fill their layouts, AND keep their aspect ratio.
The best way is to set their "object-fit" css property to "contain".
Try this:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={imageNetwork}
alt={"alt"}
title={"titleasdasdsada"}
sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
/>
// Other Content
</Card>
Try this
parent-image-element {
width: 100px;
}
image {
width: 100%;
max-height: 100px;
}
Related
I want the hover functionality to happen (UI) which is happening in this case:
Desired UI
Source: https://www.loewshotels.com/santa-monica
Now since modifying background image styles is a bit complicated, I have to use the Box Component from Material UI and in it, I have placed the image and also done the desired transitions like zoom out, etc. However I cannot add text on the Box component (which again is basically inside a Card Component).
Code for the specified part:
<Grid item xs={4}>
<Card
onMouseDown={console.log("fewfwg")}
className={classes.cardWelcomeTwo}
>
<CardActionArea>
<Box variant="outlined" style={{ position: "relative" }}>
<img
className={classes.paperImgWelcome}
src="https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg?&targetx=0&targety=-25&imagewidth=500&imageheight=751&modelwidth=500&modelheight=700&backgroundcolor=AF7163&orientation=1"
alt="nothing"
/>
<CardContent>
<Typography
variant="h4"
component="h2"
className={classes.welcomeGridHeadingText}
>
Explore The City
</Typography>
</CardContent>
</Box>
</CardActionArea>
</Card>
</Grid>
Styles.js:
paperImgWelcome: {
flexGrow: 1,
position: "relative",
"&:hover ": {
display: "flex",
transition: "0.6s all ease-in-out",
// animationTimingFunction: "ease-out",
transform: "scale(1.1)",
backgroundSize: "75%",
opacity: "0.75",
},
},
cardWelcomeTwo: {
position: "relative",
height: 510,
flexGrow: 1,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
},
welcomeGridHeadingText: {
position: "absolute",
textAlign: "center",
color: "white",
fontFamily: "'Lato'",
fontSize: "60px",
letterSpacing: "5px",
lineHeight: "60px",
},
Currently, my UI looks like this:
not hovered
hovered
You can use the ::after pseudo-element with the content property and show it only on hover.
Here's a simple example:
CSS
.backgroundImage {
background-image: url("https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg");
height: 500px;
color: white;
padding: 50px;
}
.backgroundImage:hover::after {
content: "For a ride";
}
HTML
<div className="backgroundImage">
<h1>Let's Go</h1>
</div>
For simplicity it uses just plain HTML/css.
If you want to see it in action in a material-ui/React project here's the sandbox link.
I'm using the react-webcam npm library and currently, the "capture image" button is located at the bottom of the screen as shown here.
Capture button default position
What I want to do is to get that button to the bottom center of the capture window as I've shown here.
Area the capture button needs to be added
This is my camera and button
<Webcam
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
style={{ height: 600, width: "100%" }}
/>
<button
onClick={capture}
style={{marginTop: "-200px"}}
>
Capture photo
</button>
I've tried giving marginTop and marginBottom but couldn't get it done. Any idea how I can fix this?
You need a container that can wrap the button to give it a position absolute:
//style.css
.video-container {
position: relative;
}
.button {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, 0%);
}
//your jsx
<div
className="video-container"
style={{ height: '600px', width: "100%" }}
>
<Webcam
autoPlay
style={{ height: '100%', width: "100%" }}
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
/>
<button className="button" onClick={capture} >Capture photo</button>
</div>
Demo: https://codesandbox.io/s/strange-ardinghelli-mss9c?file=/src/index.js:0-42
I want to make the img and text below as close as possible, but I'm having difficulties doing so..
CSS for style on container :
const style = {
height: '100%',
top: '0px',
left: '0%',
width:'12%',
position: 'fixed',
color: 'rgb(30 215 96)',
textAlign: 'center',
background: 'rgb(40, 40, 40)'
};
<Container style={style}>
<Table>
<TableRow>
<TableCell style={{width: '3px'}}>{track.trackCover,
<img
class="cover"
alt="cover"
style={{ width: "50px", height: "50px" }}
src={track.trackCover}
/>}</TableCell>
<TableCell style={{width: '3px'}} >{track.name}, {track.artists}</TableCell>
</TableRow>
</Table>
</Container>
I've currently got it set up like this. The width in the table cell reduces it as close as the img above, however I want them basically touching.. I've tried -3px and even 0. But They seem to make it more distant. Can someone help me identify what I'm doing wrong please?
I'm new to reactstrap and I have some issues with the layout.
I would like to design a connection container like following example.
enter image description here
When I resize my screen for smaller screens, the text is layered over the image. And it's not aligned properly. enter image description hereenter image description here
The code I have for this layout is:
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Card>
<CardBody>
<AvForm className="form-horizontal" onValidSubmit={(e, v) => {
this.handleValidSubmit(e, v)
}}>
<Row>
<Col sm="3"><img src={mollieImage} style={{
width: '300px',
height: "auto",
boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)"
}}/></Col>
<Col sm="9">
<Row><h5>Connection Status</h5></Row>
<Row><p>Allow access to your customers, payments, organization, profiles and onboarding.</p></Row>
<Row>
{this.props.isConnected ? <Button type="submit" color="danger">Disconnect</Button> :
<Button type="submit" color="success">Connect</Button>}
</Row>
</Col>
</Row>
</AvForm>
</CardBody>
</Card>
</Container>
</div>
</React.Fragment>
)
};
For your image to be responsive, I'd refactor the 300px value to be maxWidth instead of width. As for its width you can have it be responsive to its container by assigning 100% to it.
<Col sm="3"><img src={mollieImage} style={{
maxWidth: "300px",
height: "auto",
boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)",
width: "100%"
}} /></Col>
With regards to the smaller screens view, the prop sm on your Col components will only kick in if the screen size is greater than or equal to 576px. See the sample col-sm- definition on the Bootstrap stylesheet
#media (min-width: 576px)
.col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
So when the client's screen size if less than 576px, that is when the sm prop will start to lose effect thus your layout changes drastically. For that, your going to have to come up with solutions such as using xs prop or CSS media queries
I created right side collapsible panel. I need to change the panel height (max 100px) after the collapse
My css is like this
background: '#f7f7f7', borderRadius: 5, width: 200, marginBottom: 0, border: 50, overflow: 'hidden',
and Rekit code like this
render() {
return (
<div className="common-coll-bar">
<Collapse bordered defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<p>{text}</p>
</Panel>
</Collapse>
</div>
);
}
can you help me?
!do not use height it will ruin the layout!
Just use line-height
.ant-collapse-header {
line-height: 100px;
}