對齊文本元素寬度與圖像元素駐留在相同的容器

Question

我正在使用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屬性讓元素展開到最寬。

要強制boxe儘可能小，您需要設置一個小數值爲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>