キャプション付きシュリンクラップ画像コンテナ

Question

画像によって幅が指定されている縮小ラップされたdivにキャプションを追加する際に問題があります。

問題は、PHPでユーザーが設定した画像の幅を親divの幅に反映させたいということです。

<div class="shrinkwrap"> 
    <img src="image.jpg" width="$width"> 
</div> 

.shrinkwrap { 
    display: inline-block; 
    border: 1px solid #FFF; 
} 

この便利なトリックはよく私を務めているが、私は、画像にキャプションを追加する場合、キャプションは画像の幅を超えて、それは親のdivの幅をプッシュすると述べました。

私はこのキャプション（ポジショニング、フレックスボックスなど）でさまざまなアプローチを試しましたが、キャプションが最も広い場合はshrinkwrapコンテナが子の幅をとるため、全体の外観に影響します。

コンテナdivの幅を設定してイメージを100％幅に設定するのは簡単な解決策ですが、動的にするためにはインラインスタイルを使用する必要がありました。

ご協力いただければ幸いです！

HTML：

<div class="shrinkwrap"> 
<img id="version1" src="http://placehold.it/520x320" width="320px" alt="" /> 

    <div class="caption"> 
    Lorem ipsum dolor sit ius ex admodum consequuntur, te dicunt epicurei invenire eum, te ius vocent eligendi. Sed unum persecuti te, tempor nostrud disputationi eos ad. ius ex admodum consequuntur, te dicunt epicurei inv! 
    </div></div> 

CSS：

.shrinkwrap { 
    border: 1px solid red; 
    display: inline-block; 
} 

#version1 { 
    display: block; 
    max-width: 100%; 
} 

.caption { 
    text-align: center; 
    border-top: 1px solid red; 
    padding: 10px; 
} 

http://jsfiddle.net/nx39rkev/49/

Answer 1

あなたはJavaScriptでこれを達成することができます。ここではjQueryを使用したスニペットです：だけでなく、キャプションにPHPの幅を重複しないのはなぜ

はここjsfiddle

var imgSetByUser = $("img"); 
 

 
imgSetByUser.each(function(){ 
 

 
var thisImgWidth = $(this).width(); 
 
$(this).parent().css("max-width",thisImgWidth); 
 

 
});

.shrinkwrap { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 

 
#version1 { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 

 
#version2 { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.caption { 
 
    text-align: center; 
 
    border-top: 1px solid red; 
 
    padding: 10px; 
 
} 
 

 
.full { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Exact pixel length, no percentage --> 
 
<!-- Full width can be set as a class --> 
 

 
<div class="shrinkwrap"> 
 

 
    <img id="version1" src="http://placehold.it/520x320" width="320px" alt="" /> <!-- % is relative to parent--> 
 

 
    <div class="caption"> 
 
    Lorem ipsum dolor sit ius ex admodum consequuntur, te dicunt epicurei invenire eum, te ius vocent eligendi. Sed unum persecuti te, tempor nostrud disputationi eos ad. ius ex admodum consequuntur, te dicunt epicurei inv! 
 
    </div> 
 

 
</div> 
 

 

 
<br/><br/><br/> 
 

 
<!-- Full width percentage and pixel length --> 
 
<div class="shrinkwrap" style="width:500px"> 
 
    <img id="version2" src="http://placehold.it/520x320" alt=""> 
 
    <div class="caption">Lorem ipsum dolor sit amet, ius ex admodum consequuntur, te dicunt epicurei invenire eum, te ius vocent eligendi. Sed unum persecuti te, tempor nostrud disputationi eos ad. ius ex admodum consequuntur, te dicunt epicurei invenire eum, te ius vocent eligendi. Sed unum persecuti te, tempor nostrud disputationi eos ad.</div> 
 
</div>