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

Question

我有一个图像框，图像中的文本将动态生成。

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

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

.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

您将需要background-repeat: repeat-y;图像，但必须更改它。就它看起来而言，它是一个单一的图像 - 您必须裁剪它以具有顶部边框，并且图像的“主体”将是您想要垂直重复的部分。

或者，由于设计简单，您可以只使用 cssborders

编辑也，正如一些评论所建议的，你应该向我们展示一些代码而不仅仅是一张图片，这将有很大帮助！

Answer 2

为什么不使用边框？

.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/

Answer 3

使用 css 边框代替图像

  div{
    border:#333 solid 6px; border-radius:0 0 6px 6px; 
    box-shadow: 0px 0px 0px 2pt green;   
    height:auto;
    width:200px;
    background:#c1c1c1
}​

演示http://jsfiddle.net/wYUFD/12/

Answer 4

演示

嗨现在习惯background-size:cover;或max-width

像这样

p{
 max-width:200px;
  border:solid 10px red;
  background:url('http://www.gravatar.com/avatar/eb71f65106648cf6618b10423e8b0451?s=32&d=identicon&r=PG') no-repeat;
  background-size:cover;
  color:#fff;
}

演示

Answer 5

我希望这对你有帮助

.my-community-details{
        background-color: @mild-gray;
        margin: 20px 10px 10px 10px;
        padding: 5px;
        max-width: //set what depends up on your image width
        max-height: //set what depends up on your image height
        overflow-y: auto;