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

Question

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

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

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

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

спасибо

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Ваш лучший выбор - вероятно, просто использовать tested-and-tried solution.