Создать кадр для картинки

Question

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

Но эта картинка должна быть масштабируемой. Ширина и высота этого кадра генерируется шириной и высотой изображения.

И должен иметь возможность изменять высоту кадра через JavaScript.

Спасибо.

PS: Прежде всего, я должен иметь возможность сузить фрейм через JavaScript.

Answer 1

Если бы я был вами, я бы позаботился о том, чтобы я мог повторно использовать (повторить) изображения, и тогда я сделаю это так:

<div id="frame">
   <div id="top-left"></div>
   <div id="top"></div>
   <div id="top-right"></div>

   <div id="left"></div>
   <div id="imageSpace"></div>
   <div id="right"></div>

   <div id="bottom-left"></div>
   <div id="bottom"></div>
   <div id="bottom-right"></div>
</div>

где: #top-left, #top-right, #bottom-left, #bottom-right используют угловые изображения в качестве фона и имеют width и height.

И #top, #right, #bottom, #left используют повторное изображение для своих фонов.

Проверьте прикрепленное изображение, где я положил линии, где вы должны вырезать оригинальный кадр-изображение.

Этот метод позволит вам изменить ширину #top / #bottom и #left / #right, чтобы увеличить размер вашего кадра.

Answer 2

Это может быть довольно сложно осуществить.

Если вы используете современные браузеры, которые поддерживают CANVAS, ознакомьтесь с этой демонстрацией, которая делает то, что вы ищете: Демоверсия CANVAS

В противном случае вам нужно будет создать 8 изображений (4 угла и 4 стороны), где стороны сделаны таким образом, чтобы их можно было разложить на плитки, чтобы приспособиться к нужному размеру.

Следующий трюк - как построить кадр. Вы можете вручную создать DIVs / Tables вокруг ваших изображений, чтобы создать этот эффект, но это будет очень громоздко и не очень чисто. Лучше всего было бы использовать jQuery (или вашу любимую библиотеку), чтобы подключить все изображения на странице с помощью класса CSS (например, «fancyFrame»), и обернуть их по мере необходимости HTML-разметкой, которая использует изображения, созданные вами выше через CSS.

Answer 3

Забавно, мне приходилось делать именно это, когда я работал на ImageKind.com. Для справки: если вы пойдете в магазин фреймов, например, , этот , перейдите к шагу 4 (Добавить циновки) и нажмите «Настроить ширину», есть слайдер, который выполняет более или менее то, что вы описываете.

У меня изначально было несколько вложенных DIV с большими противоположными L-образными рамками в качестве фоновых изображений. Небольшая проверка Firebug показывает, что они изменили это, чтобы быть столом. Я уверен, что это более эффективно, поскольку боковые элементы могут укладываться плиткой.

Answer 4

Сужение фрейма с помощью Javascript - самая простая часть, правда. Как только вы настроите HTML / CSS так, чтобы он уже масштабировался, вы можете просто установить ширину с помощью Javascript следующим образом:

var photo = document.getElementById('photoFrame');
photo.width = '200px';

Answer 5

Вы можете использовать технику Drop Apart Shadow от List Apart , которая использует CSS и PNG для создания автоматически изменяемой тени для изображений. Вы можете изменить технику для создания изменяемого размера кадра.

Вам понадобится четыре деления и четыре изображения. Углы должны быть обрезаны под углом 45 градусов с прозрачностью:

• Изображение 1 - Верхний левый угол, верхняя и левая стороны рамки.
• Изображение 2 - Верхний правый угол и правая сторона рамки.
• Изображение 3 - Левый нижний угол и нижняя часть рамы
• Изображение 4 - Нижний правый угол рамки