画像要素とテキスト要素の幅を同じコンテナに配置する

Question

私は、React with bootstrapを使用し、テキストと画像要素を含むカードボックスを実装しようとしているWebアプリケーションで作業しています。

外部API（flickrなど）で画像を取り込むまでの画像サイズは不明ですが、カード全体のサイズを取り込んだ画像のサイズに合わせて調整したいのですが、そのサイズに合わせて調整する。

現在の実装では、上記の要件を部分的に解決していますが、text要素の幅が広すぎて画像サイズに調整されないという問題があります。

私はこれを解決するために可能な属性を試してきましたが、まだ理解できませんでしたので、何か提案をいただきありがとうございます。

現在の構造：

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>