复制动态元素大小

我正在创建一个与反应js的网站，其中包括一些图像。我想要做的是包括一些标准的背景div/矩形，它们与每个相关图像的大小完全相同，这样这些图像就可以在它们上面做一些动画。请看下面的代码片段。然而，我不确定如何动态地告诉css每个要复制的图像的正确大小是多少。我一直在尝试创建第二个精确的图像，然后创建某种重叠的入口边界，但它不能保持图像的相同尺寸。怎样才能最好地创建一个与我提供的图像大小始终相同的背景矩形？谢谢!

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>

转载请注明出处:http://www.jubohx.com/article/20230518/1292237.html