My component is defined like this:
class Test extends React.Component {
outterDivStyles() {
return {
position: "relative",
width: "100%",
overflow: "hidden",
/*height: this.props.height || 200*/
}
}
innerDivStyles(){
return {
position: "absolute",
top: 0,
left: 0,
right: 0,
width: "1000%",
transition: "left .5s",
transitionTimingFunction: "ease"
}
}
render(){
return(
<div>
<div ref="detailsOutterDiv" className="detailsOutterDiv" style={this.outterDivStyles()}>
<div ref="detailsInnerDiv" className="detailsInnerDiv" style={this.innerDivStyles()}>
<div className="slide" ><img src="http://placehold.it/250x200" /></div>
</div>
</div>
</div>
)
}
React.render(<Test />, document.getElementById('container'));
The associated CSS rules are as follows:
.detailsOutterDiv{
background-color: #f00;
/*height: 200px;*/ //if the height is 200px, then it's ok, but can it be done without that?
width: 300px;
display: block;
}
.slide img{
display: block;
height: auto;
}
Is there a method to ensure that the image displays with full height even if the parent div doesn't have a specific height?
You can view the code snippet on jsfiddle.