I have this style:
.album-photos-container {
position: relative;
display: flex;
flex-flow: wrap;
justify-content: center;
.image-card-small {
width: 48%;
margin: 4px;
filter: brightness(0.8);
img {
width: 100%;
height: 100%;
max-height: 400px;
}
}
}
This is what it looks like with images getting distorted.
I read about the display: flex; and flex-flow: wrap; and it looks this is what they do and I need some other approach maybe.
I try to set the max-height: 400px; to a higher value like 2000 then it looks like this:
Please advise: I want images to fill the box no matter how wide or tall the image is!
UPDATE
Here is the component
import React from 'react'
const ClickablePhoto = (props) => {
return (
<div onClick={props.onClick} className="image-card-small">
<img src={props.src} id={props.id} alt="album" />
</div>
)
}
export default ClickablePhoto
And I tried like this:
return (
<div onClick={props.onClick} style={{backgroundImage: 'url(' + require(`${props.src}`) + ') background-size: cover'} } >
<img src={props.src} id={props.id} alt="album" />
</div>
)
But the image src from the props looks like this: /static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.png and background-image: url cant find the image
You can't crop images with <img> element.
You could use div with background-image:
<div class="image" style="background-image: url(...); background-size: cover;" />
Related
Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.
import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";
function Carousel() {
return (
<div className={styles.carousel}>
<div
className={styles.carouselInner}
styles={{
backgroundImage: `url(${legend})`,
}}
>
{/* <img src={images[0].img} /> */}
</div>
</div>
);
}
export default Carousel;
.carousel {
width: 60%;
height: 700px;
/* background-color: black; */
}
.carouselInner {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
This is how I put my folder directory looks like
I want to show items as flex but still it is showing like a column. What am I doing wrong here?
This is my component :
import React from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import "./Listing.css";
const ProductComponent = () => {
const products = useSelector((state) => state.allProducts.products);
const renderList = products.map((product) => {
const { id, title, image, price, category } = product;
return (
<div className="container">
<div key={id} className="item-box" >
<Link to={`/product/${id}`}>
<div className="image-box">
<img src={image} alt={title} />
</div>
<div className="detail">
<div >{title}</div>
<div >$ {price}</div>
<div >{category}</div>
</div>
</Link>
</div>
</div>
);
});
return <>{renderList}</>;
};
export default ProductComponent;
This is the css file of this component:
.container{
width: 100%;
height: 90vh;
flex-wrap: wrap;
display: flex;
}
.item-box{
border: 2px solid #000;
display: flex;
height: auto;
width: 380px;
padding: 10px;
justify-content: center;
margin: 20px;
}
img{
height: auto;
width: 300px;
}
And finally this is my App.css:
* {
font-family: "Roboto", sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
Thanks in advance.
I wanna show the items as flex (from left to right) but it is like a column though I defined "display:flex"
You are looping through the array and outputing multiple containers. Each container is display-flex but the problem is that they all have only one child. Move the map inside the container:
return (
<div className="container">
{ products.map((product) => {
const { id, title, image, price, category } = product;
return (
<div key={id} className="item-box" >
<Link to={`/product/${id}`}>
<div className="image-box">
<img src={image} alt={title} />
</div>
<div className="detail">
<div >{title}</div>
<div >$ {price}</div>
<div >{category}</div>
</div>
</Link>
</div>
)
})}
</div>
)
In the style of .container just add flex-direction:coloum
.container{
width: 100%;
height: 90vh;
display: flex;
flex-direction: column;
}
If you want the column in center, then you can append justify-content:center & align-items:center as well.
I have a piece of styled-components CSS here. How should I fix it to remove the blank space below the rendered web?
const Tetris = () => {
return (
<StyledTetrisWrapper>
<StyledTetris>
<Stage stage={createStage()} />
<aside>
<div>
<Display text="Score" />
<Display text="Rows" />
<Display text="Level" />
</div>
<StartButton />
</aside>
</StyledTetris>
</StyledTetrisWrapper>
)
}
const StyledTetrisWrapper = styled.div`
background: url(${bgImage2}) #000;
width: 100 vh;
height: auto;
overflow: hidden;
background: cover;
`
Image of the error here:
enter image description here
const StyledTetrisWrapper = styled.div`
background: url(${bgImage2}) #000;
width: 100vw;
height:100vh;
overflow: hidden;
background-size: cover;
`
I added background-size cover and height 100vh;
I have created an image carousel with an active image in the middle and all the images on the side and trying to show the active image on the side by adding a border around the image.
The border is being shown initially, but I am unable to see it after clicking on other images.
ImageDisplay.js:
import React,{useState} from 'react';
import {SideBySideMagnifier} from 'react-image-magnifiers';
import '../CSS/imagedisplay.css';
function ImageDisplay({product}) {
const image = typeof(product.images) ==='object' ? product.images[0].props.src: product.images;
const [current,setCurrent] = useState(image);
const handleClick = (e) =>{
setCurrent(e.target.src);
}
return (
<div className='carousel'>
<div className='images'>
{typeof (product.images)==='object' ? product.images.map( (item,idx) =>
(
<div key={idx.toString()} className='small-images' onClick={handleClick}>
<img className={item.props.src===current ? 'selected': ' '} src= {item.props.src} alt=''/>
</div>
)
) :
( <div className='small-images'><img src={product.images} alt={product.name}/></div>)}
</div>
<div className='container'>
<SideBySideMagnifier className='magnifier' alwaysInPlace={true} imageSrc={current} imageAlt='present' largeImageSrc={current}/>
</div>
</div>
)
}
export default ImageDisplay;
CSS:
.carousel{
display:flex;
}
.images{
height:100vh;
overflow: scroll;
}
.small-images img {
width:5vw;
height:5vw;
object-fit:contain;
margin:20px 20px 20px 0;
display:block;
cursor:pointer;
}
/* .magnifier{
height: 80%;
} */
.magnifier > div {
display: flex;
height:80%;
}
.magnifier>div>img {
max-height: 500px;
max-width: 600px;
margin: 100px;
width: auto !important;
object-fit:contain; /* should be removed from inline styles */
}
.selected{
border:1px solid #F26241;
}
Can anybody help me on this?
I just got into react-bootstrap today. I want the form to be in a div with margins on left and right side. My jsx looks like this:
const Settings = () =>{
return(
<div className="content">
<div className="box">
{/* Actual form with course info */}
<Form className="course-info">
<Form.Group as={Row} controlId="formHorizontalEmail">
<Form.Label variant="settingsLabel" column sm={3}>
Course Title
</Form.Label>
<Col sm={5}>
<Form.Control/>
</Col>
</Form.Group>
</Form>
</div>
</div>
);
}
CSS:
/* A big wrapper for everything on this page */
.content{
display: flex;
align-items: center;
justify-content: center;
}
/* The box containing the class settings */
.box {
width: 600px;
height: 600px;
border: 30px solid #A6D1DF;
margin-top:50px;
}
.center-items{
margin-top: 1em;
text-align: center;
}
/* Gives the form left/right margin and sets text color */
.course-info {
padding-left: 20px;
color: #9E7772;
}
Form.Label-settingsLabel {
font-size: 1em;
color: red;
}
And the form content overflows the right-hand side of the box, and removing the margin fixes the problem.
However, I still want that margin for styling purposes. Any suggestions? Thanks