如何使图像缩放到 div 的大小 [ReactJS TS]

Question

我目前正在开发一个必须在卡片上显示视频/文本链接列表的管理面板。

我正在处理的环境不使用引导程序，所以我不能简单地使用他们的卡。这意味着我必须重新创建卡片组件。

我已经做到了，所以卡片可以正常显示，就好像它是普通卡片一样，如下所示：

代码如下：

<div className="">
        <Link className="styledLink" to={`adminhelpcard/${this.state.id}`}>
          <div className="card">
            <h5 className="card-header">{this.state.title}</h5>

            <div>
              <img
                className="Sprite"
                onLoad={() => this.setState({ imageLoading: false })}
                onError={() => this.setState({ tooManyRequests: true })}
                src={this.state.thumbnail}
                style={
                  this.state.tooManyRequests
                    ? { display: "none" }
                    : this.state.imageLoading
                    ? { display: "null" }
                    : { display: "null" }
                }
              />
            </div>
            <div>
              {this.state.tooManyRequests ? (
                <h6 className="mx-auto">
                  <span className="badge badge-danger mt-2"></span>
                </h6>
              ) : null}
              <div className="card-body mx-auto">
                <h6 className="card-title">
                  {this.state.title
                    .toLowerCase()
                    .split(" ")
                    .map((letter) => letter.charAt(0).toUpperCase() + letter.substring(1))
                    .join(" ")}
                </h6>
              </div>
            </div>
          </div>
        </Link>
      </div>

我正在尝试重新创建水平卡片 (https://getbootstrap.com/docs/4.3/components/card/#horizontal)

特别是包含视频的链接。但结果是这样的

重新创建尝试的代码如下：

<div className="horizontalCard">
          <div className="innerCard">
            <div className="leftImage">
              <img
                className="Sprite"
                onLoad={() => this.setState({ imageLoading: false })}
                onError={() => this.setState({ tooManyRequests: true })}
                src={this.state.thumbnail}
                style={
                  this.state.tooManyRequests
                    ? { display: "none" }
                    : this.state.imageLoading
                    ? { display: "null" }
                    : { display: "null" }
                }
              />
            </div>
            <div className="rightText">
              <div className="card-body">
                <h5 className="card-title">{this.state.title}</h5>
                <p className="card-text">...</p>
                <p className="card-text">...</p>
              </div>
            </div>
          </div>
        </div>

所以我的主要问题是，我该如何重新创建/调整图像大小以使其保持在 leftImage div 的尺寸范围内。

Answer 1

使用 height: auto 您可以根据纵横比调整图像。

img.Sprite {
  display: block;  /*optional*/
  width: 100%;     /*optional*/
  max-width: 100%;
  height: auto;
  border: 0;    
}

img 的父级必须有一个宽度（以 %、px、em、rem 为单位）