I have one very basic ReactJS component called: Designer which displays the Eiffel Tower as well as a bottom panel with some controls in it.
The Designer is inside a div with the following size: { width: 510px, height: 300px}.
The Eiffel Tower image has the following size: { width: 300px, height: 800px}.
This is the current rendered output of the Designer:
But my problem is that the Eiffel Tower image is not getting fit into its parent div.
My goal is what you can see on the following image:
If on the file: /src/CanvasCrop/CanvasCrop we do: let showImage = false;, we get the following:
so, we confirm that its parent div (green background) gets sized accordingly having its own width and height whether the image is getting shown or not.
Here is its source code (original):
/src/CanvasCrop/CanvasCrop:
import React, { Component } from "react";
import "./CanvasCrop.scss";
class CanvasCrop extends Component {
render() {
let showImage = true;
return (
<div className="partial-designer-canvas-crop">
<div>
{
showImage &&
<img
src="https://i.ibb.co/DKxRFtb/image.jpg"
style={{
maxWidth: "100%",
maxHeight: "100%",
transform: "scale(-50%, -50%)"
}}
alt="target"
/>
}
</div>
</div>
);
}
}
export default CanvasCrop;
Here is the outer source code:
/index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
import Designer from "./Designer/Designer";
function App() {
return (
<div>
<span class="title">Trying to fit Eiffel Tower</span>
<div className="App"
style={{
// keep this as it is
overflow: 'auto',
width: '510px',
height: '300px',
}}
>
<Designer />
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here you have the CodeSandbox.io you can experiment with:
https://codesandbox.io/s/7jv56qr1yx
Could you please, provide back a fork of the above CodeSandbox.io with the Eiffel Tower fitted into its parent div without setting manually a fixed width / height?
Side note: if instead of a portrait image, we use a landscape image, it should also fit into its parent div without going beyond its limits.
Example image (size: { width: 800px, height: 300px}):
https://i.stack.imgur.com/jUeCD.jpg
Thanks!
If I understand your problem correctly, it looks like you are missing a height: 100% on your .partial-designer-canvas.
Here, try this:
https://codesandbox.io/s/x664y69ow
I only changed src/Canvas/Canvas.scss. You can add a calc to account for your tool bar too, like so:
.partial-designer-canvas {height: calc(100% - 60px)}
Related
I'm creating a web page and I took a jpg and pgn image to put as a background.
But by no means does it appear on the page.
import './Entrada.css'
const Entrada = () => {
return(
<div style={{
backgroundImage: "url(/secoes_02.jpg)"
}}>
<div><img src='secoes_02.jpg'/></div>
<div className='texto'>testatastastasta</div>
</div>
)
}
export default Entrada
In the code above I can place the image as a figure, but I cannot as a background.
I've already tried to insert it by Css and tried import to.
.geral{
background: url("/public/img/partes/secoes_02.jpg");
}
But in no way does it appear in my react.
I already reinstalled the nodejs packages and changed the folder location.
And the error continues.
Has anyone experienced this?
Try it plz. It works for me.
import footer from '../../assets/images/footer.png';
function MyComponent() {
return (
<footer style={{ background: `url(${footer})`, backgroundSize: "contain" }}>
Try this.. worked for me
js:
render() {
return (
<div className="bgimage">
<div className='texto'>testatastastasta</div>
</div>
)
}
css:
.bgimage {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url(https://business.adobe.com/content/dam/dx/us/en/products/magento/open-source/open-source-marquee-2x.png.img.png);
}
Height is given 100%, based on your need you can adjust.
When entering the website, this is the first UI you'll see.
Then, if you scroll down to the very beginning of section B
I expect the section B will become sticky and the currentPercentage state will start increasing from 0% gradually if you scroll.
When the currentPercentage state reach 100%, the sticky effect will no longer apply to sectionB, then you can scroll down to section C or the bottom of the page.
It's kind of like circle-ci homepage
You can try to scroll in this section.
I think there are a few things we need to figure out for the solution
How to make section B become sticky when scroll position arrives section B
How to scroll and increase the percentage when arriving section B
I've tried thinking in both css and javascript way, still cannot find the solution
I've also done lots of research for this problem for a few days but still not figuring it out.
I believe a lots of developers would like to know how to do this kind of effect in their frontend, and it will be beneficial for other developers to have quicker solution to deal with this kind of UX in the future, since from what I've noticed no one has mentioned this kind of UX handling.
I would be appreciated if someone can answer this question with an example, for the reference for other developers.
App.js
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
import { useState } from "react";
export default function App() {
const [currentProgress, setCurrentProgress] = useState(100);
return (
<div className="App">
<div className="sectionA">Section A</div>
<div className="sectionB">
Section B
<ProgressBar
now={currentProgress}
label={`${currentProgress}%`}
style={{ marginBottom: "16px" }}
/>
</div>
<div className="sectionC">Section C</div>
</div>
);
}
Codesandbox
https://codesandbox.io/s/mutable-fire-sz19b?file=/src/App.js:0-619
Update 1
I updated the code and can be able to make container B sticky, but dont know how to continue for the UX
App.js
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
import { useState } from "react";
export default function App() {
const [currentProgress, setCurrentProgress] = useState(3);
return (
<div className="App">
<div className="sectionA">Section A</div>
<div style={{ position: "sticky", top: 0 }}>
<div className="sectionB">
Section B
<ProgressBar
now={currentProgress}
label={`${currentProgress}%`}
style={{ marginBottom: "16px" }}
/>
</div>
<div className="sectionC">Section C</div>
</div>
<div style={{ minHeight: "400vh", maxHeight: "calc(200vh - 466px)" }} />
</div>
);
}
Codesandbox
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-778
Update 2
Added library react-scroll-percentage to scroll to update
currentProgress
However, when the whole containerB exposed in the viewport, the currentProgress will start updating, which is not what I want

What I want is when SectionB reach the top of the viewport, the scrolling will make user feel sticky and then currentProgress will start updating from 0%
App.js
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import { useScrollPercentage } from "react-scroll-percentage";
import ProgressBar from "react-bootstrap/ProgressBar";
export default function App() {
const [currentProgress, setCurrentProgress] = useState(0);
const [ref, percentage] = useScrollPercentage({
threshold: 1.0
});
useEffect(() => {
setCurrentProgress(percentage * 100);
}, [percentage]);
return (
<div className="App">
<div className="sectionA">Section A</div>
<div style={{ position: "sticky", top: 0 }}>
<div className="sectionB" ref={ref}>
Section B
<ProgressBar
now={currentProgress}
label={`(${currentProgress})%`}
style={{ marginBottom: "16px" }}
/>
</div>
<div className="sectionC">Section C</div>
</div>
<div style={{ minHeight: "400vh", maxHeight: "calc(200vh - 466px)" }} />
</div>
);
}
Codesandbox
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-1029
You need to listen to scroll events, check scrollTop of the scrolling element, and decide what the css and currentProgress need to be. This is easiest when the height of each section is known and constant. The outer element also needs a large predetermined height, to leave room for scrolling.
The code might just be
if (scrollTop > heightofSectionA) {
//set sectionB css to {position: fixed, top: 0, ...}
currentProgress = (scrollTop-heightofSectionA)/lengthofSectionB*100
} else {
//set sectionB css to {position: static}
currentProgress = 0
}
There is a number of ways the html and css could look. With position: sticky you might not need to change css at all. But as long as you know what the css at any stage of the scroll should look like, you should have no problems switching between them.
try this
getScrollPercentage(el){
const percentage = (window.scrollY - el.offsetTop + el.scrollHeight) / el.scrollHeight;
return percentage < 0 ? 0 : Math.min(percentage, 1)
}
I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help
Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.
I'm looking to put into effect a react-slick carousel but I'm having problem getting the image to vertically center. This problem is established right here.
https://codesandbox.Io/s/react-slick-playground-o7dhn
Images are not focused
Flexbox property does no longer work (the crimson div is a flexbox with justify-content: center;
align-gadgets: middle;)
margin:car simplest works for horizontal alignment (which I should not need to set if I'm using flexbox)
I can not remove the top margin (inspite of padding:0px at the div and margin-top:0px at the picture) As a outcome, any photo with the peak of 400px or extra gets shifted and reduce off (div has the height of 400px)
code in the sandbox:
import React from "react";
import ReactDOM from "react-dom";
import Slider from "react-slick";
import "./index.css";
class ReactSlickDemo extends React.Component {
render() {
var settings = {
dots: false,
arrows: false
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img src="http://placekitten.com/g/400/400" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/200/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
}
ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));
I have the same problem you can add this CSS into your component, I hope that's worked for you!
img {
margin: auto;
}
.slick-slide > div {
display: grid;
place-items: center;
}
I would like to modify the image in the background with the help of a comment.
The images come from the tmdb API.
So I think you have to create a background image component and pass it on to the URL.
I know that CSS has the background-image property, but it works for static images ...
What is the best method, I would like to make this component reusable.
Here is how you would have to do it.
Create your <div> and its style with a default background-image
Create 3 <button> to triggers your function changeImage() and provide a parameter
Change the style.backgroundImage with JavaScript such as below:
function changeImage(category){
document.getElementById('div-bg').style.backgroundImage = 'url("https://source.unsplash.com/320x240/?' + category + '")';
}
#div-bg {
display: block;
width: 320px;
height: 240px;
background-image: url("https://source.unsplash.com/320x240/?sky");
}
<div id="div-bg"></div>
<button onclick="changeImage('nature')">Nature</button>
<button onclick="changeImage('animal')">Animal</button>
<button onclick="changeImage('fire')">Fire</button>
If you have any question, please ask!
By doing this it works, I have my background. But I did not manage to do it with a reusable component
import React from 'react';
const VideoDetail = ({ title, description, background }) => {
const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500/";
const backgroundStyle = {
color: 'white',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'scroll',
backgroundPosition: 'center',
backgroundSize: 'cover',
width: "100%",
height: "400px",
backgroundImage: `url(${IMAGE_BASE_URL}${background})`
};
return(
<div>
<div style={background !== undefined ? backgroundStyle : null }>
<h1>{title}</h1>
<p>{description}</p>
</div>
</div>
)
}
export default VideoDetail;import React from 'react';