我正在创建一个包含大量图像的 React 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>
最佳答案
不确定这是否是您要查找的内容,但 div 与图像的大小相同。
请参阅下面更新的代码:
class App extends React.Component {
constructor(props) {
super();
this.state = {
onClick: false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ onClick: !this.state.onClick });
}
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>
<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>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
img {
width: 25%;
}
.on {
transform: translateX(80px);
}
.child-div {
height: 100px;
width: 80px;
position: relative;
}
.child-div img {
width: 100%;
height: 100%;
}
.child-div:after {
content:"";
position:absolute;
width:100%;
height:100%;
left: 0;
background: red;
z-index: -1;
}
<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>
关于javascript - 复制动态元素大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48716513/