小编Mar*_*tty的帖子

我正在创建一个文件输入来选择可以预先可视化的多个图像。

为了处理多个图像，我将它们放入组件状态的数组中，并映射预可视化图像。

但是，当我从输入中选择图像并使用 设置状态时this.setState({imgArray: newArray})，this.state.array.map(image=><img src={image}/>)不会重新渲染所选图像。

代码：

export default class posts extends Component {
  state = {
    fotos: ["/iconos/img.svg"] // If there are not img selected, it renders one image icon
  }

  onUploadVarious = e => {
    let newArray = []
    Object.values(e.target.files).map(file => {
      let nuevo = new FileReader()
      nuevo.onload = event=> newArray.push(event.target.result)
      nuevo.readAsDataURL(file)}
    )
    this.setState({fotos: newArray}) // the state is set correctly
  }
}

使成为：

<div className=" border rounded" style={{"height":"30%", "overflow":"auto"}}>
    {this.state.fotos.map(foto =>
      <img src={foto||"/iconos/img.svg"} …

我想制作具有恒定宽度和高度的 div，其中包含尺寸未知的子图像。

像这样的东西：

我得到的最接近的是 withmax-height: inherit; max-width: inherit但它改变了纵横比

.parent {
  border: 1px solid ;
  width: 40vh;
  height: 40vh;
  overflow: hidden;
  display: flex;
}

img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
}

<div class="parent">
  <img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>

我怎样才能做到这一点？