Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Метод уменьшения размеров картинки

Автор: Urod 11.5.2005, 22:54

Есть большая (по весу) картинка. Оказалось, ее нарезать на 5 составных картинок и определенным методом соединить. Результат: весь графики уменьшается + картинка динамична (возможно, ошибаюсь про второе). Вот пример такого решения (от dm9): Код <div style="height: 100px; overflow: hidden;"> <img src="http://avatar.dm9.ru/1/408.jpg" alt="" /><img       src="http://avatar.dm9.ru/1/399.jpg" alt="" /><img       src="http://avatar.dm9.ru/1/409.jpg" alt="" /><img       src="http://avatar.dm9.ru/1/398.jpg" alt="" /></div> А вот мой код (нде есть ошибка, т.к. картинка общая не влезает в ячейку по ширине): Код <td bgcolor="#7C93B3">           <div style="height: 97px; overflow: hidden;"> <img src="../Graphic/Top_1_krovlya1.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya2.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya3.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya4.jpg" alt="" /><img      src="../Graphic/Top_1_krovlya5.jpg" alt="" /></div> </td>

Автор: dm9 11.5.2005, 23:53

Urod, а ты точно поняла, что это был за пример, твой первый код? Кстати, ссылка: http://dm9.ru/vingrad/examples/html/siteheader/ Там удаляются те картинки, которые прекращают вмещаться в основное поле без прокрутки. Ку? Тебе это надо? Что тогда не работает, опиши точнее.

Автор: Aliance 12.5.2005, 00:06

А размер (высота) картинок Top_1_krovlyaN.jpg - равен или меньше 97px?

Автор: Urod 12.5.2005, 12:32

Цитата(Aliance @ 12.5.2005, 00:06) А размер (высота) картинок Top_1_krovlyaN.jpg - равен или меньше 97px? Равен. Добавлено @ 12:40 Цитата(dm9 @ 11.5.2005, 23:53) Urod, а ты точно поняла, что это был за пример, твой первый код? Не, похоже, не поняла. При размерах странички в px, да, думаю, это не надо Цитата(dm9 @ 11.5.2005, 23:53) Там удаляются те картинки, которые прекращают вмещаться в основное поле без прокрутки. Ну чтобы я окончательно все поняла, объясни, пож-та. Когда я думала делать динамическую картинку, я применила этот прием, и у меня\ в итоге часть невлезавших кусочков картинки просто переносились вниз. Это так и должно было быть? А по логике вещей, эти кусочки должны были просто удалиться? Т.е. не сжаться, а именно удалиться?

Автор: dm9 12.5.2005, 13:56

Они переносятся вниз. Но в моём примере так как стоит overflow:hidden, они выносятся за границы видимой области, и для глаза пропадают. На самом деле, они просто не видны. =============================== Вообще, я что-то уже того... Те, кто задаёт мне вопросы: пожалуйста, читайте мои сообщения внимательно! Вот я, например, писал уже где-то, что если ты заменишь overflow: hidden на overflow: auto, то сразу поймёшь, как это работает. Заменяла? Читать подробнее тут: http://www.webber.ru/articles/article.html?article_id=402 Я уже не первый раз рассказываю по второму кругу одно и то же одним и тем же людям (не будем показывать пальцем, хоть это был слонёнок...)

Автор: Urod 12.5.2005, 20:26

dm9 Меняла. В моем случае даже с overflow:hidden они переносились вниз, а при overflow: auto - просто появлялась проктрутка. Вот поэтому я разницы особо и не поняла. Очевидно, в моем случае была ошибка, и, следовательно, полноценно рассмотреть этот пример я не могла. Я так понимаю, что по идеи там просто не уместившиеся куски исчезают, и получатся ерунда, т.к. видны остаются левые три картинки, а потом пустое место (где были не уместившиеся куски). Я не оправдываюсь... не хотела напрягать...

Автор: dm9 12.5.2005, 20:56

ОК, это я устал просто Не надо на форуме появляться в таком виде, спать надо Сорри. Насчёт прокрутки - да, появляется прокрутка, если задать overflow: auto. А если hidden, то прокрутки нет, перенесённые куски просто-напросто исчезают, так как не входят в видимую область. Но чтобы всё работало правильно, надо задать (чётко и ясно) эту видимую область. То есть прописать нужный height, равный высоте картинки, и width (100%, или сколько там). Если картинки переносятся и видны, значит, некорректно задана высота. Цитата(Urod @ 12.5.2005, 21:26) Я так понимаю, что по идеи там просто не уместившиеся куски исчезают, и получатся ерунда, т.к. видны остаются левые три картинки, а потом пустое место (где были не уместившиеся куски). Да, именно так и происходит. Ерунда или нет - зависит от цели Можно просто обрезАть непоместившуюся часть картинки. Как это делать... картинку делай одну, ставь её в див со стилем style="overflow: hidden; width: 100%". === Вообще, это всё неправильные методы. Шапку надо делать с растягивающимся фоном. Много картинок в шапке - это неправильно. Примеров - куча. Расчёт идёт для 800х600, подгонка под 640х480 сейчас неактуальна, имхо... Вот примеры шапок. http://dvsweb.ru/forum/ http://www.samsung.ru/ http://delphimaster.ru/ Ну и так далее. Обычно большего не изобретают.

Автор: Aliance 12.5.2005, 21:09

Цитата(dm9 @ 12.5.2005, 21:56) перенесённые куски просто-напросто исчезают не совсем так я ее смогу прокрутить колесиком. а если это clip - то тогда уже вырезается...

Автор: dm9 12.5.2005, 21:12

Aliance, под какой браузер (версия тоже)? У меня под Оперу 8, ИЕ 6, ФФ 1.0.3 такого нет... странно.

Автор: Aliance 12.5.2005, 22:05

ИЕ 6. Такое всегда было... Хотя у меня специфическая мышка Она на всю россию только в москве продаеЦЦа и только в 2ух местах =)

Автор: dm9 12.5.2005, 22:19

Ну, не знаю. У меня ничего не прокручивается

Автор: Urod 12.5.2005, 23:34

Цитата(dm9 @ 12.5.2005, 20:56) Много картинок в шапке - это неправильно. Примеров - куча. Расчёт идёт для 800х600, подгонка под 640х480 сейчас неактуальна, имхо... Вот примеры шапок. http://dvsweb.ru/forum/ http://www.samsung.ru/ http://delphimaster.ru/ Ну и так далее. Обычно большего не изобретают. Да, я напрягалась по этому поводу, но что-то ничего умнее в голову не пришло. Сначала думала нарезать разных кусочков картинок, а потом - сделать одну красивую. Но что-то идеи в сюжете картинки не родилось. (из железа к компам много идей лезет в голову, а про альпинистов - увы...) Добавлено @ 23:35 СПАСИБО за разъяснение!!!!

Автор: gepard 13.5.2005, 07:54

Код <div style="height: 100px; overflow: hidden;">     <img src="http://avatar.dm9.ru/1/408.jpg" alt="" /><img          src="http://avatar.dm9.ru/1/399.jpg" alt="" /><img          src="http://avatar.dm9.ru/1/409.jpg" alt="" /><img          src="http://avatar.dm9.ru/1/398.jpg" alt="" /></div> Мои аватары - подопытные кролики

Автор: Urod 13.5.2005, 08:47

gepard Почему бы и нет?

Автор: dm9 13.5.2005, 11:32

gepard Ну так, чего далеко ходить

Автор: gepard 13.5.2005, 13:59

Я и не против

Автор: Urod 17.5.2005, 20:52

dm9 Ну у меня, к сожалению, нет идей по оптимизации общей картинки-логотипа (мне имеющаяяся нравится ). Значит, будем резать по такому методу: Код <img src="../Graphic/Top_1_krovlya1.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya2.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya3.jpg" alt="" /><img       src="../Graphic/Top_1_krovlya4.jpg" alt="" /><img      src="../Graphic/Top_1_krovlya5.jpg" alt="" /></div> Да? Вот только будут ли эти картинки-кусочки подгоняться под размер ячейки, в которую они вставлены?

Автор: dm9 20.5.2005, 14:38

Подгоняться ничего не будет, будут убираться куски. Лучше сделай нормальную шапку, без кучи графики...

Автор: Urod 20.5.2005, 16:17

dm9 Я не понимаю: ну не будет кучи графики, но от этого размеры картинки не изменятся! (я про ширину - высоту). И, значит, если у картинки ширина 800 px, то при ширине экрана в 1024 px, эта картинка не растянется с 800px на 1024px., и будут пустые места в ячейке видны. Или я чего-то не понимаю?

Автор: dm9 20.5.2005, 16:25

Пустые места надо заполнять копирующимся фоном. Я уже приводил промеры сайтов с нормальной шапкой. dvsweb.ru/forum, например. И так далее.

Автор: Urod 20.5.2005, 17:06

dm9 Я посмотрела этот пример. Ну там же как раз разбивка большой картинки на 4 маленьких. И в чем же разница между моей разбивкой на (5 кусков) и этой (на 4 куска)? В кол-ве кусков? Там так: Код <TR>     <TD width=287 height=139><A href="http://dvsweb.ru/forum/index.php?"><IMG        height=139 alt=""        src="Форум студентов (Powered by Invision Power Board).files/logo4.jpg"        width=287 border=0></A></TD>     <TD width=170 height=139><A href="http://dvsweb.ru/forum/index.php?"><IMG        height=139 alt=""        src="Форум студентов (Powered by Invision Power Board).files/logo5.jpg"        width=170 border=0></A></TD>     <TD width=287 height=139><A href="http://dvsweb.ru/forum/index.php?"><IMG        height=139 alt=""        src="Форум студентов (Powered by Invision Power Board).files/logo6.jpg"        width=287 border=0></A></TD>     <TD height=139><A href="http://dvsweb.ru/forum/index.php?"><IMG height=139        alt=""        src="Форум студентов (Powered by Invision Power Board).files/logo7.jpg"        width="100%" border=0></A></TD></TR> Ну, хоть убей, ни какой разницы между этим и моим кодом, кроме названия кусочкоу картинки и кол-ва кусочков картинки, я не вижу!

Автор: dm9 20.5.2005, 17:13

Разница в том, что там шапка вписывается в 800х600, а твоя - нет. Остальное там - растягивающийся фон. А у тебя ширина шапки 1100 пикселей. И это никуда не вписывается...

Автор: Urod 21.5.2005, 00:10

dm9 А вот тут как раз и подумала сделать размер этих кнопок таким, чтобы они вмещались с одну строку (без переноса) даже при разрешении экрана 800х600! Ты об этом и написал постом выше, я так понимаю Буду делать. Посмотрим, что получится

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)