html - 将文本元素宽度与图像元素对齐驻留在同一容器中

Question

我正在使用带有 Bootstrap 的 React 开发一个网络应用程序，并尝试实现一个包含文本和图像元素的卡片盒。

虽然图像大小在通过外部 API(flickr 等...)获取图像之前是未知的，但我想将整个卡片盒的大小调整为获取图像的大小，并使文本元素得到调整到它的大小。

我当前的实现部分满足了上述要求，但问题是文本元素占用了太多的宽度空间并且没有根据图像大小自行调整。

我一直在尝试可能的属性来解决这个问题，但还没有弄清楚，所以我很感激任何建议......!

当前结构:

render() {
    return (
      <div>
        <div className="row text-center">
          {
              this.props.photos.map((item, index) => {
                return (
                  <div className="col-md-3" key={`Photo_${index}`}>
                    <div className="card-box" key={`Photo_${index}`}>
                      <div>
                        <p>{item.title}</p>
                      </div>
                      <img src={`${item.media.m}`}/>
                    </div>
                  </div>
                );
              })
          }
          <div className="clearfix" />
        </div>
      </div>
    );
  }

当前样式:

.card-box {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: white;
    box-shadow: 3px 3px 2px #888888;
}

.card-box p {
    text-align: center;
    display: block;
}

.card-box img {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    top:50%;
    left:50%;
}

Answer 1

您是否考虑过使用 css max-width 属性？您可以指定包含图像和文本的列的最大宽度。