将文本元素宽度与图像元素对齐位于同一容器中

Question

我正在开发一个web应用程序，使用带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属性？您可以指定图像和文本的列容器的最大宽度。

Answer 2

您可以使用display:table属性让元素扩展到最宽的位置。

要强制框尽可能小，您需要为width设置一个较小的值，甚至可以使用0。

不要一起使用table-layout:fixed;，它不会再扩展。

示例

​

.squeezeIt {
display:table;
width:0; /* will expand width according to the widest content*/
margin:auto;/* mind behavior here */
}
/* inline-table can also be used */
.squeezeIt + .squeezeIt {
display:inline-table;
margin:5px;
}
/*makup*/
.squeezeIt {
border:solid;
padding:5px;
}
p {
margin:0;
text-align:justify;
text-align-last:justify;
}
body {
text-align:center;
}

<div class="squeezeIt">
<p>Some random text  up here</p>
<img src="http://dummyimage.com/150x50" />
</div>
<div class="squeezeIt">
<p>Some random  </p>
<img src="http://dummyimage.com/50x50" />
</div>
<div class="squeezeIt">
<p>Some random text showing </p>
<img src="http://dummyimage.com/100x50" />
</div>
<div class="squeezeIt">
<p>Some random text showing up here</p>
<img src="http://dummyimage.com/200x50" />
</div>
<div class="squeezeIt">
<p>Some random  </p>
<img src="http://dummyimage.com/40x50" />
</div>

​

Answer 3

你只能通过CSS来实现你想要的布局，但是你可以在这里使用JavaScript。演示：

​

var cardBoxImages = document.querySelectorAll(".card-box > img");

for (var i = 0; i < cardBoxImages.length; i++) {
  var cardBoxImage = cardBoxImages[i];
  var cardBox = cardBoxImage.parentElement
  cardBox.style.width = cardBoxImage.offsetWidth + "px";
}

.card-box {
  display: inline-flex;
  flex-direction: column;
  
  /* specify width only by content */
  box-sizing: content-box;

  /* centering for text and image */
  text-align: center;
  align-items: center;
  
  /* just styles for demo */
  outline: 1px solid yellow;
  margin: 10px;
  padding: 10px;
}

<div class="card-boxes">
  <div class="card-box">
    <div class="card-box__text">Short text</div>
    <img class="card-box__image" src="https://placehold.it/200x300/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff"></div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/100x100/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container very long
      text.</div>
    <img class="card-box__image" src="https://placehold.it/400x600/a00/fff">
  </div>
</div>

​