如何將圖片放置在圖片下方且寬度相同？

我想在我的照片下方放置標題（但仍然在上面），並且與圖片的寬度相同（照片的可以更改）。如何將圖片放置在圖片下方且寬度相同？

這是我所做的，但經過數小時的研究後，我一直無法弄清楚如何做到將圖片的寬度擴展爲相同的圖片寬度。有人可以給我一個提示嗎？謝謝

figure{ 
    position: relative; 
} 
figure img{ 
    z-index: 1; 
} 
figure .caption{ 
    display: block; 
    width: 100%; 
    position: absolute; 
    bottom: 2px; 
    color: #fff; 
    background: rgba(0,0,0,0.7); 
    padding: 8px 8px 8px 8px; 

} 

<div class="img"> 
    <figure> 
     <a href="#"><img src="http://1.bp.blogspot.com/_xNTvSztbjn0/S9rYIIoIdkI/AAAAAAAAFHk/RCYU5iILKTc/s1600/0l+P1010254.jpg"/></a> 
     <figcaption> 
     <span class="caption">A short description</span> 
     </figcaption> 
    </figure> 
    </div>

這裏是小提琴http://jsfiddle.net/7hKKV/

來源

2014-02-06 Reveclair

略調整你的代碼：

figure { 
    position: relative; 
    width: 100%; 
} 
figure img{ 
    z-index: 1; 
    width: 100%; 
} 
figcaption { 
    display: block; 
    width: 100%; 
    position: absolute; 
    bottom: 2px; 
    color: #fff; 
    background: rgba(0,0,0,0.7); 
} 
figcaption .caption { 
    display: inline-block; 
    padding: 8px; 
}

設定爲100％寬度的父母，感動你caption的樣式爲父figcaption，將標題的padding移至span，使您的ima GE 100％的寬度，以填補集裝箱

http://jsfiddle.net/LF33A/1/

來源

2014-02-06 17:53:38

你真的很接近。你需要爲了加入一些width: 100%造型來實現這一

figure{ 
    position: relative; 
    width: 100%; /*Allows .caption to extend across image without going over*/ 
} 
figure img{ 
    z-index: 1; 
    width: 100%; /*Image will be size to 100% if div.img*/ 
    height: auto; /*Prevents Skewing of image*/ 
}

更新小提琴http://jsfiddle.net/7hKKV/12/

來源

2014-02-06 17:47:39 user934902

感謝您的回答，但現在的字幕上那張圖片的右邊緣！ – Reveclair

不好使一些編輯給我一秒鐘 – user934902

如何將圖片放置在圖片下方且寬度相同？

回答

相關問題