画像の下部にキャプションを入れる
現在スマホサイトを作成しています。
そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。
http://subculsheets.blog.fc2.com/blog-entry-19.html
上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。
スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。
何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。
キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。
下記が現在のコードです。
HTML-----------------------------------------------------------
<div class="photo-center2">
<img src="../img/○○.jpg">
<div class="caption-txt2">キャプションテキスト</div>
</div>
---------------------------------------------------------------
CSS-----------------------------------------------------------
.photo-center2 img{
width:100%;
max-width:380px;
}
.photo-center2{
position: relative;
border:1px solid rgb(204, 204, 204);
padding: 5px;
background-color:#ffffff;
margin:0 auto;
margin-bottom: 15px;
width:90%;
max-width:380px;
}
.caption-txt2{
position: absolute;
color: #fff;
padding: 5px;
font-size: 12px;
bottom: 9px;
background-image: url("../images/caption.png");
text-align:center;
width:95%;
max-width:382px;
}
------------------------------------------------------
どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか？
ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。
