Не может ли это быть решено с использованием цвета фона / фонового изображения, отступов и рамки?
<style>
#variableSize {padding: 1em;
border: 3px solid #000;
background-color: rgba(215,215,215,0.5);
background-image: url(path/to/img.png);
background-repeat: repeat;
background-position: 0 0;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
}
</style>
<div id="variableSize">
<p>Variable size content.</p>
</div>
У него проблемы с совместимостью, я признаюсь, но использование rgba () можно заменить просто (частично) прозрачным png, чтобы обеспечить некоторую кросс-браузерную поддержку?
Я не совсем понимаю, как этот CSS приспосабливает содержимое переменного размера. Я полагаю, что как минимум есть 4 фиксированных деления изображения (углы) и 4 повторяющихся изображения (2 в X, 2 в Y). реальный вопрос в том, как расположить поплавки и как получить повторяющиеся деления для заполнения доступного пространства - Скотт Эверден
Кажется, я неправильно понял вопрос, к сожалению. Хотя мой приведенный выше пример работает / должен работать, он не предоставит углы изображения, которые вам нужны.
Если вы используете вышеупомянутое предложение, но содержите изображения в содержимом, чтобы служить углами изображения, то это может работать:
<style>
#variableSize {padding: 1em;
border: 3px solid #000;
background-color: rgba(215,215,215,0.5);
background-image: url(path/to/img.png);
background-repeat: repeat;
background-position: 0 0;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
position: relative;
}
#variableSize .topLeftImg
{border: 0 none transparent;
position: absolute;
top: 0;
left: 0;
}
#variableSize .topRightImg
{border: 0 none transparent;
position: absolute;
top: 0;
right: 0;
}
#variableSize .bottomLeftImg
{border: 0 none transparent;
position: absolute;
bottom: 0;
left: 0;
}
#variableSize .bottomRightImg
{border: 0 none transparent;
position: absolute;
bottom: 0;
right: 0;
}
</style>
<div id="variableSize">
<img class="topLeftImg" src="path/to/image.png" />
<img class="topRightImg" src="path/to/image.png" />
<img class="bottomLeftImg" src="path/to/image.png" />
<img class="bottomRightImg" src="path/to/image.png" />
<p>Variable size content.</p>
</div>
Заполнение #variableSize должно быть равно или больше ширины / высоты изображений. Но должно работать? Я попробую сегодня вечером, когда вернусь домой, если ты не попробуешь сначала.
Хорошо, работает демо, на: сайте , где-то. :)