Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.02.2022, 12:58   #1
Werver
 
Регистрация: 10.02.2022
Сообщений: 5
По умолчанию Резиновая рамка одним тегом без разрезания исходной картинки

Добрый день, есть картинка рамки, нужно сделать так, чтобы рамка растягивалась по вертикали и горизонтали с изменением размера окна и содержимого, пример: https://werver96.github.io/ramka_one_div/ , здесь рамка сделана фоном и несколькими отдельными отдельными кусками исходного изображения, подскажите кто знает, как сделать тоже самое, одним тегом, а так же не разрезая исходную картинку.
Изображения
Тип файла: png ramka.png (36.5 Кб, 17 просмотров)
Werver вне форума Ответить с цитированием
Старый 10.02.2022, 15:44   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,179
По умолчанию

отрисовать рамку в SVG
ADSoft вне форума Ответить с цитированием
Старый 10.02.2022, 17:47   #3
Werver
 
Регистрация: 10.02.2022
Сообщений: 5
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
отрисовать рамку в SVG
Не подходит, при изменении размера увеличивается рисунок, а не "резинится". Причем не получается растянуть его по контурам блока чтобы текст был внутри его, нужно чтобы рамка растягивалась на всю ширину браузера
Werver вне форума Ответить с цитированием
Старый 11.02.2022, 08:32   #4
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,179
По умолчанию

одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина
ADSoft вне форума Ответить с цитированием
Старый 11.02.2022, 10:50   #5
Werver
 
Регистрация: 10.02.2022
Сообщений: 5
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина
Я сделал одним тегом, выше давал ссылку
Код:
<div style="background: 
					url(ramka_left_bottom.png) no-repeat left bottom,
					url(ramka_left_top.png) no-repeat left top,
					url(ramka_right_bottom.png) no-repeat right bottom,
					url(ramka_right_top.png) no-repeat right top,
					url(ramka_vertical_left.png) repeat-y left,
					url(ramka_vertical_right.png) repeat-y right,
					url(ramka_horizontal_top.png) repeat-x top,
					url(ramka_horizontal_bottom.png) repeat-x bottom;
					min-width: 200px;
					margin: 100px auto;
					padding: 60px;	">
Text
</div>
Взял все в один тег div, и добавил несколько частей рамки, но, мне усложнили задачу, и сказали сделать найти способ, реализовать растягивающую рамку, без разрезания исходной картинки на части, так же используя один тег. Если не найду решения до вторника, мне расскажут как.
Werver вне форума Ответить с цитированием
Старый 17.02.2022, 11:54   #6
Werver
 
Регистрация: 10.02.2022
Сообщений: 5
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина
Ответ сам не нашел, однако преподаватель по курсу подсказал, есть достаточно интересное стилевое свойство border-image, ссылка подробнее о ее работе на ютуб https://www.youtube.com/watch?v=p1Uk_gHrLQA . В итоге с одним тегом не разрезая картинку вполне реально это сделать, оставлю может кому будет интересно.
Код:
	<style>
.ramka {
margin: 100px auto;
border:100px solid red;
background-size: contain;
border-image-source: url(ramka.png);
border-image-slice: 100;
border-image-repeat: round;
}
	</style>
В этом случае, сам border а точнее обычная линия его границы заменяется картинкой. Вот результат: https://werver96.github.io/ramkaOneDivOneImg/
Werver вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
в чем ошибка? Что за свитч с одним кейсом? Где брек? Что за else без if болтается? pedro228 Общие вопросы C/C++ 5 05.06.2019 18:13
[Silverlight] Рамка вокруг картинки Uniskull WPF, UWP, WinRT, XAML 0 12.12.2012 21:39
Масштабирование картинки без GDI+ Mixasik Общие вопросы Delphi 5 28.07.2008 20:09
Часть фона одним цветом а другая часть другим (без таблиц). Lanselot HTML и CSS 4 25.04.2008 18:41