I am currently working on a project using react js where I need to incorporate multiple images. My goal is to have standard background divs / rectangles that match the exact size of each image, allowing for animations to be performed on top of them. The snippet below shows what I have tried so far. However, I am uncertain about how to dynamically inform CSS of the correct dimensions of each image in order to replicate them. I experimented with creating an identical second image and applying some kind of overlapping solution, but it did not maintain the original image's dimensions. What would be the best approach to creating a background rectangle that always matches the size of the provided image? Thank you!
class App extends React.Component {
constructor(props) {
super();
this.state = {
onClik: false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({onClick: !this.state.onClcik });
}
render() {
return (
<div className="parent-div">
<button onClick={this.handleClick}>Click Me!</button>
<div className="child-div">
<img className={this.state.onClick ? "on" : "off"} src="https://imgflip.com/s/meme/Cute-Cat.jpg" />
<div className="background-div"></div>
</div>
<div className="child-div">
<img className={this.state.onClick ? "on" : "off"} src="http://www.readersdigest.ca/wp-content/uploads/2011/01/4-ways-cheer-up-depressed-cat.jpg" />
<div className="background-div"></div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));img {
width: 25%;
}
.on {
transform: translateX(90px);
}
.background-div {
background-color: red;
height: 100px;
width: 80px;
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>