我如何在 reactJS 中调整我的 <img> 大小以使其适合屏幕？答案

【问题标题】：how do i resize my <img> in reactJS so that it fits to the screen?我如何在 reactJS 中调整我的 <img> 大小以使其适合屏幕？
【发布时间】：2020-06-29 19:07:51
【问题描述】：

我正在尝试在我的应用程序屏幕上显示图像。如果我将显示设置（比例和布局）设置为 100%，那么我可以在屏幕上看到完整的图像。如果设置为默认值 (150%)，则不会显示完整的图像，否则我将不得不滚动屏幕才能完整查看图像。如何将图像设置为默认大小，以便始终可以完全查看图像而无需滚动？

代码：

JSX 文件

  <div id = "clearDiv" className = "App-header">
      <img id="elementId" src= {`data:image/png;base64,${this.state.image}`}/>
  </div>

CSS

   .App-header {
    background-color: #dfe3eb;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    font-size: calc(10px + 2vmin);
    color: rgb(1, 19, 1);
    }

先谢谢了！！

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

尝试对象匹配属性：

img {
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

【讨论】：

【解决方案2】：

150% 真的是默认值吗？

也许将宽度设置为 100vw

另外，这可能会有所帮助sizing div based on window width

【讨论】：