html - 文本应始终位于图像框内

Question

我有一个框，它是一个图像，图像中有文本，这些文本将被动态生成。

请查看随附的屏幕截图以获取更多信息。

当有更多文本时，如何确保图像拉伸(stretch)？

.my-community-box{
        background: url('/assets/my-community-box.png') no-repeat !important;
        background-size: 100%;
        width: 287px;
        min-height: 474px;
        float: right;

        .my-community-details{
            background-color: @mild-gray;
            margin: 20px 10px 10px 10px;
            padding: 5px;

            ul{
                width: 250px;
                margin: 0 0 9px 0;
                li{

                }
            }

            a{
                color: @darker-green;
            }

            a:hover{
                text-decoration: none;
                color: @light-green;
            }
        }

Answer 1

为什么不使用边框？

.my-community-box{
        background: #F3F3F2;
        width: 287px;
        min-height: 474px;
        float: right;
        border: 3px solid #C5C3C3;
}

.my-community-box-wrap{
        border-left: 2px solid #C2E2A0;
        border-right: 2px solid #C2E2A0;
        float: right;
}

演示:http://jsfiddle.net/AWXHr/