帶有標題的收縮包裝圖像容器

我在向圖像提供寬度的收縮包裝div添加標題時遇到了一些問題。帶有標題的收縮包裝圖像容器

事情是，我想圖像的寬度由用戶通過PHP設置，這反過來會影響父div的寬度。

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

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

這有用的技巧一直擔任我很好，但是當我想一個標題添加到圖像，並表示字幕超過圖像的寬度，它推動父div的寬度。

我試過不同的方法，這個標題（定位，flexbox等），但由於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/

來源

2016-06-14 fed

爲什麼不重複的標題php的寬度，以及？或者在容器上？ –

如果你能夠限制容器寬度動態圖像寬度，這可能有所幫助：http://stackoverflow.com/q/37442430/3597276 –

嗨米歇爾，我想到，但唯一的方法來做到這一點將是添加動態設置寬度的內聯樣式。這是我想避免的。我希望容器和標題具有圖像的寬度，當然這是可能的！我嘗試過使用display：flex，但是當它到達圖像的末尾時無法獲取標題。 – fed

您可以用JavaScript實現這一目標。下面是使用jQuery一個片段：

下面是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>

來源

2016-06-14 23:38:50 Ricky

帶有標題的收縮包裝圖像容器

回答

相關問題