Как создать гибкую рамку изображения?

Question

Я хочу создать рамку PNG поверх изображения, которая динамически формируется, поэтому высота и ширина изображения различаются для всех изображений.

http://thejourneyhomebook.com/photos/index.html

это конечный результат, которого я хочу достичь. Это возможно с помощью jQuery.

Будет хорошо использовать больше изображений и div.

спасибо

Answer 1

Я написал плагин jQuery, чтобы сделать это некоторое время назад. Я просто добавил его в Google Code несколько минут назад. Надеюсь, это работает для вас!

http://code.google.com/p/jquery-imageframe/

Answer 2

Вам понадобится еще несколько оберток вокруг изображения (решение Гомми), и при достаточной стилизации вы получите что-то вроде 9-фрагментного масштабирования во флэш-памяти.

Вы также можете использовать подход CSS3, описанный в посте, но он будет работать только с современными браузерами.

Answer 3

Ваша страница примера имеет только три разных размера изображений фиксированного размера, что делает его простым. Для поддержки любого возможного размера изображения вам понадобится дополнительная разметка, как показано в ответ Гомми .

Лучше всего будет просто использовать проверенное и испытанное решение .

Answer 4

Да, это возможно.

У вас будет 8 делений на изображение.

HTML:

<div class="imageContainer">
  <div class"tl"></div>
  <div class"t"></div>
  <div class"tr"></div>
  <div class"l"></div>
  <div class"r"></div>
  <div class"bl"></div>
  <div class"b"></div>
  <div class"br"></div>
  <img src="myImage" />
</div>

CSS:

.imageContainer{
  position:relative;
}

.imageContainer div { 
 position:absolute;
 z-index:2;
}

.imageContainer .tl, .imageContainer .tr, .imageContainer .bl, .imageContainer .br { 
 z-index:3;
}

.imageContainer .t, .imageContainer .tl, .imageContainer .tr{
 top: -20px;
}

.imageContainer .b, .imageContainer .bl, .imageContainer .br{
 bottom: -20px;
}


.imageContainer .l, .imageContainer .tl, .imageContainer .bl{
 left: -20px;
}

.imageContainer .r, .imageContainer .tr, .imageContainer .br{
 right: -20px;
}

Все, что вам нужно сделать сейчас, это разместить спрайт изображения и установить ширину и высоту. Установите ширину и высоту слева вверху справа и снизу с помощью jQuery

GL