html - 内部图片的分割宽度

Question

我希望文字不要大于图片，这里是问题的一个例子

http://i.imgur.com/DwIMS3Q.png

我希望它变成什么样

http://i.imgur.com/VOA1W60.png

如您所见，当图片太紧时，由于文字的缘故，会出现白色边框。我希望文字不要比图片大。

这是 HTML 代码:

<div class="row">
    <div class="col-md-6" style="float:none;margin:0 auto;">
        <div class="polaroid center-block">
            <img src="./images/650x650.png" alt="Norway" class="img-responsive center-block" style="width:auto;height:auto">
            <div class="my_container" style="width:auto;height:auto">
                <p>The Troll's in Hardanger, Norway</p>
            </div>
        </div>
    </div>
</div>

这是 CSS:

body {
    margin: 25px;
}

div.polaroid {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
}

div.my_container {
    text-align: center;
    padding: 10px 20px;
}

提前致谢。

Answer 1

将图像的宽度设置为 100%。

.polaroid img{
    width: 100%;
}

还有宝丽来:

.polaroid {
    width: 100%;
}