Höhe Auto in Mutter mit absoluter Position

Question

Meine Komponente ist etwas Anzeige folgt:

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')); 

Und die CSS ist:

.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; 
} 

Gibt es eine Möglichkeit, dass das Bild mit voller Höhe zeigt an, ob das Mutter div hat keine spezifische Höhe?

Hier ist jsfiddle.

Answer 1

Sie müssen die Höhe von detailsInnerDiv nach dem Laden des Bildes erhalten.

Um dies zu tun, müssen Sie offsetHeight verwenden, um die Höhe zu erhalten, speichern Sie es in der Komponente state und ordnen Sie es detailsOutterDiv zu.

So etwas wie dieses

class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     height: 0 
    }; 
    } 
    get outterDivStyles() { 
     return { 
      position: "relative", 
      width: "100%", 
      overflow: "hidden", 
      /*height: this.props.height || 200*/ 
     } 
    } 
    get 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,height : this.state.height }} 
       > 
        <div 
         ref={node => this.detailsInnerDiv = node} 
         className="detailsInnerDiv" 
         style={this.innerDivStyles} 
        > 
        <div className="slide" > 
         <img 
         onLoad={() => this.setState({height:this.detailsInnerDiv.offsetHeight})} 
         src="http://placehold.it/250x200" 
         /> 
        </div> 
        </div> 
       </div> 
      </div> 
    ) 
    } 
} 

jsfiddle