html - 具有绝对位置的父级内部高度自动

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

CSS 是:

.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