высота авто внутри родителя с абсолютной позицией

Question

Моего компонента что-то объявление следующим образом:

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

И КСС:

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

Есть ли способ, что изображение показывает полную высоту, если родитель div не имеет определенной высоты?

Адрес jsfiddle.

Answer 1

Вы должны получить высоту detailsInnerDiv после загрузки изображения.

Для этого вы должны использовать offsetHeight, чтобы получить высоту, сохранить его в компоненте state и присвоить его detailsOutterDiv.

Что-то вроде этого

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