0

画像であるボックスがあり、動的に生成される画像内にテキストがあります。

詳細については、添付のスクリーンショットをご覧ください。

テキストが増えたときに画像が引き伸ばされるようにするにはどうすればよいですか?

ここに画像の説明を入力

.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;
            }
        }
4

5 に答える 5

1

画像を変更する必要がありますがbackground-repeat: repeat-y;、変更する必要があります。見える限り、それは1つの画像です-上部の境界線を持つようにトリミングする必要があり、画像の「本体」は垂直に繰り返したい部分になります。

あるいは、単純な設計のため、css を使用することもできます。borders

EDIT また、いくつかのコメントが示唆しているように、画像だけでなくいくつかのコードを表示する必要があります。

于 2012-10-10T11:32:46.497 に答える
1

デモ

こんにちは、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;
}

デモ

于 2012-10-10T11:39:02.550 に答える
1

これがお役に立てば幸いです 

.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;
于 2012-10-10T11:43:07.227 に答える
1

画像の代わりに 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/

于 2012-10-10T11:35:40.330 に答える
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/

于 2012-10-10T11:35:29.920 に答える