Как вставлять картинки и регулировать их размер в html

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Я не буду теоретизировать… или вернее, я буду не только теоретизировать... вы должны всё попробовать сами. Я просто хочу показать (и покажу), как можно добавить картинку в ЛЮБОЙ блок – будь то шапка, подвал, статья… Потратьте на это час своего времени и в дальнейшем у вас будет гораздо меньше вопросов. вы будете это УМЕТЬ.

Чтобы всё испробовать «вживую», создайте на рабочем столе папочку, в нее положите любую картинку и создайте простейший html-документ. Картинку можно взять и эту, например.



Размеры пометьте себе сразу – это важно. В данном случае они равны 259 на 194 px.


Поехали? Все стили и изменения я буду комментировать.

Код:
<html> <head> <title>Как вставлять картинки и регулировать их размер</title> <style>
body {background-color: #27405E; }
h2 {color: #FFFFFF; }
p {color: #FFFFFF; }
.cont {background-color: #CCCCCC; } </style> </head> <body> <h2>Первоначальный вариант</h2> <p>Если высота и ширина блока не указаны, высота и ширина картинки не указаны, выравнивание не указано.</p> <div class="cont"><img src="1.jpeg"></div> </body>
</html>



Особенность этого варианта в том, что блок не отрегулирован по высоте и потому просто «обтекает» картинку.
А что будет, если принудительно задать его высоту, чуть больше, чем у картинки? (меняем стиль контейнера, картинку не трогаем)


Код:
.cont {
background-color: #CCCCCC; 
height: 250px; 
}



По умолчанию картинка располагается в левом верхнем углу, но её можно и подвинуть… Создадим блок объявлений для селектора .cont img (то есть для всех изображений, находящихся внутри блока cont).

Варианты «двигания» могут быть различны, как пример:

Код:
.cont img {padding: 25px; }
или
Код:
.cont {text-align: right; }

но это уже совсем другая тема. Важно, что размер картинки при этом не меняется!



Допустим, теперь мы хотим увеличить картинку. Эту же.
Легко.

.cont img {
height: 250px;
}



Вы замечаете, что качество стало хуже? Если оно вас ещё устраивает – дерзайте, в противном случае ищите картинку больше. Точно так же можно принудительно указать и ширину…


Код:
.cont img {
height: 250px; 
width: 60%; 
}

Картинку «растянет». В случае, если это надпись или какой-то абстрактный рисунок, возможно, кого-то это и устроит… Растянуть картинку можно и на всю ширину… и на конкретную ширину в пикселах.
Если при этом не указывать высоту, то картинка изменится пропорционально своему исходному размеру, иногда выходя за пределы блока.



Можно, конечно, это запретить…

.cont {
overflow: hidden;
}



На сегодня, наверное, достаточно… Как ставить картинку не через тег IMG, а на фон блока, я расскажу… завтра.
Зачем это нужно (через фон)? Например, чтобы сверху расположить надпись…

[OFF]Профи, не поправляйте меня, пожалуйста… я знаю, что надпись можно разместить и поверх этой картинки… но тема-то для новичков…[/OFF]
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
[OFF]Небольшие пояснения ко всему уроку:

сам HTML-код мы практически не трогаем, все изменения вносим в стили (находящиеся между тегами "style"). Если в дальнейшем стили на вашем сайте будут вынесены в отдельный файл (и это правильно, в данном случае я этого не сделала с целью упростить понимание задач) - то соответственно, свойства картинки и блока пишутся там.[/OFF]

Сегодня я обещала рассказать, как ставить картинки, не используя тег IMG. Очень распространенный способ – указывать картинку фоном блока. Не будем особо мудрить, возьмем наш вчерашний пример и немного его переделаем. Уберем тег IMG, а вместо него в стилях контейнера пропишем background-image: url(1.jpeg);

Код:
<html> <head> <title>Как вставлять картинки и регулировать их размер</title> <style>
body {background-color: #27405E; }
h2 {color: #FFFFFF; }
p {color: #FFFFFF; }
.cont {
background-image: url(1.jpeg); 
background-color: #EEEEEE; 
height: 250px; 
} </style> </head> <body> <h2>Картинка фоном</h2> <p>Без тега IMG</p> <div class="cont"></div> </body>
</html>

В данном случае (без дополнительных телодвижений с нашей стороны) картинка «замостит» всё отведенное пространство.



Чтобы убрать «мощение» воспользуемся свойством настройки повторений фона.

Код:
background-repeat: repeat-x; 
background-repeat: repeat-y; 
background-repeat: no-repeat; 

Если отключить повторы, картинка займет левый верхний угол. Чтобы её подвинуть, есть свойство background-position (вспомните, в предыдущем случае оно не использовалось!). Пользоваться им легко:

Код:
background-position: 0% 0%; 
background-position: 100% 0%; 
background-position: 100% 100%; 
background-position: 0% 100%; 

Так же допустимы любые промежуточные значения, с помощью чего положение картинки можно отрегулировать довольно точно. Ещё точнее получится, если указать вместо процентов, например, расстояние в пикселах (от верхнего левого угла).

Теперь, допустим, мы хотим растянуть картинку, возможно ли такое при использовании её качестве фона? Разумеется. Новое свойство (из CSS3) background-size позволит нам реализовать все наши задумки.

Варианты:
Код:
background-size: 800px 200px; 
background-size: 100% 100%; 
background-size: 190px auto; 
background-size: cover; 

Скриншоты не привожу, так как результат внешне идентичен тому, что мы получали с помощью тега IMG.
Каким вариантом пользоваться – выбирать вам, главное, чтобы вы понимали, что и как вы хотите сделать.
Если что-то непонятно – задавайте вопросы в теме… Если я что-то забыла или пробежалась слишком поверхностно - уточняйте.
Спасибо за внимание.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
VyacheslavH, спасибо, действительно можно... Сделаю) Ну заодно и про несколько картинок на фоне тоже расскажу)
 

Алексей Ткачёв

Пользователь
Регистрация
16.03.13
Сообщения
54
Реакции
15
Баллы
3
Возраст
33
Адрес
Дома
Довольно таки поучающе, начинающим в дизайне будет самое оно:good:. +5
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13

Алексей Ткачёв

Пользователь
Регистрация
16.03.13
Сообщения
54
Реакции
15
Баллы
3
Возраст
33
Адрес
Дома
Это всё возня)). Берете программу Artesteer и рисуете себе что угодно и как угодно. Более новые версии программы умеют делать дизайны для тройки популярных CMS. Вот ниже прикреплённая картинка шапки моего шаблона, без использования flash (тут нельзя вставить флэш). Даже два сделаю

тут показана только самая простая картинка, все вот эти тёмные (глобус и как типа сетки), это уже работа этой программы.

Возможностей реально МОРЕ в плане графического оформления, вы берете простую картинку, и делаете с ней что угодно (в том числе закругление краёв). Так же оформление кнопок submit и кнопки-ссылки тоже графически, вставка swf в шапку, вставка изображения в подвал, и не требует знаний html
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Я не нашел в хейдере чего-то похожего на фон..

Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...

и не требует знаний html

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

Добавлено через 2 секунды
Я не нашел в хейдере чего-то похожего на фон..

Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...

и не требует знаний html

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

Алексей Ткачёв

Пользователь
Регистрация
16.03.13
Сообщения
54
Реакции
15
Баллы
3
Возраст
33
Адрес
Дома
А как все учатся самоучки? Как учились Вы? Я скажу как учился я, как учились все остальные. Вот мы видим у кого то что то интересное и желаем модифицировать это для себя, берем просто исходный код, потом уже начинаем вручную что то менять, вписывать, добавлять.... А программа с открытым кодом, там есть встроенный показ кода, так же уже когда собрали сайт, выходят файлы .html, которые вполне так же может любой желающий открыть блокнотом и отредактировать то что желает. Каждый код в этой программе идёт с новой строчки, что сразу очевидно - для тех кто мало понимает и навигация удобная
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...
а вот это
<td style="background: #FFFFFF url(images/logo.png);
Это не относится к фону шапки? Т.е. не замена фона картинкой?
 

VyacheslavH

Пользователь
Регистрация
23.06.11
Сообщения
935
Реакции
325
Баллы
28
Возраст
62
Адрес
Черкассы
Это всё возня)).
.......
не требует знаний html
Когда не знаешь устройства автомобиля, на котором ездишь, малейшая проблема эксплуатации гарантирует возню по полной программе. Можно пойти на СТО, и там обдерут как липку за пустяковую услугу, без которой вполне можно обойтись, зная, с чем имеешь дело. ;)
 

Алексей Ткачёв

Пользователь
Регистрация
16.03.13
Сообщения
54
Реакции
15
Баллы
3
Возраст
33
Адрес
Дома
Когда не знаешь устройства автомобиля, на котором ездишь, малейшая проблема эксплуатации гарантирует возню по полной программе. Можно пойти на СТО, и там обдерут как липку за пустяковую услугу, без которой вполне можно обойтись, зная, с чем имеешь дело. ;)
Хорошо, значит разъясню примерно вот так - ты захотел сделать что то прикольное а не умеешь. Ты берешь программу и делаешь, а потом смотришь как именно это сделалось. Если человеку реально интересно что как делается, в плане web дизайнов и прочего программирования в web, то он будет учить шаблоны, делать его под себя, а так же создавать свои программами, дабы далее посмотреть и затем уже его куда то применить. Лично мне например нужно что то сделать, я беру более подходящую программу и делаю, а затем смотрю как я должен был сделать то, чего я не знал, а наклепав на программе теперь уже знаю. Это про меня, про других незнаю, но я больше чем уверен что много кто так делает. А если рассмотреть вашу аналогию с автомобилем. Ты купил авто, едешь, что то сломалось. Куда лезть? Ведь незнаешь устройства автомобиля. А чтоб узнать, нужно учится. Так и тут, делаешь шаблон и учишь
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
Верно, замена. td это ячейка таблицы, на фон поставлен logo.png
как сделать что-бы картинка не размножалась?..

Вот здесь

<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>

<td width="100">
<img src="ссылка" width="100" height="30" border="0">
</td>

<td style="background: #FFFFFF url(images/logo.png); text-align: center;">
<h1>Название сайта (к примеру)</h1>
</td>

<td width="150">
<img src="ссылка" width="150" height="50" border="0">
</td>

</tr>
</table>

условно можно поделить на три части (если правильно понимаю)
каждая часть отдельная картинка.


Что-бы оставить одну картинку я удалил "лишнее" ...

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>

<td width="0">
<img src="https://lumtu.com/images/logos/logo.gif" width="100%" height="313" border="0">
</td>

</tr>
</table>
<!-- /logo -->

Использовал идею что пиксели можно просто заменить на проценты.
Попробовал, вроде нормально..
Хотел схитрить.. везде поставить 100%, но..
в IE картинка искажаясь, безообразно растянулась по высоте.
Хотя в других броузерах нормально видно.
Пришлось точно указать высоту картинки.
auto тоже как-то не везде сработало..

Непонятно зачем в двух местах параметр width=
В одном месте за фон отвечает в другом за картинку?


Теперь можно добавить и вторую картинку.
Размеры по ширине указать в процентах. Допустим 80% и 20%
прижать каждую влево и вправо. Тогда по идее стыка не должно быть видно.
Лишь бы по высоте они были равны.
В итоге все должно правильно показывать в разных броузерах и на разных экранах. Я прав?

И где, и как можно заменить фон форума на картинку?
Фон - то что здесь черного цвета. Второй фон темно-серый.
Именно не просто цвет, а замена на рисунок.


Здесь вот, к примеру, сверху справа, серая табличка "добро пожаловать Koil"
выходит за границу форума. За границу серого цвета, уходя в черное..
В итоге весь форум сдвинут влево.
Мне это не мешает конечно, в окно все помещается..
 
Последнее редактирование:

VyacheslavH

Пользователь
Регистрация
23.06.11
Сообщения
935
Реакции
325
Баллы
28
Возраст
62
Адрес
Черкассы
Ты берешь программу и делаешь, а потом смотришь как именно это сделалось. Если человеку реально интересно что как делается, в плане web дизайнов и прочего программирования в web, то он будет учить шаблоны, делать его под себя, а так же создавать свои программами, дабы далее посмотреть и затем уже его куда то применить.
Другими словами это называется обезьяна с гранатой ;) Особенно, когда дело касается программирования. То, что делают генераторы шаблонов можно делать большим количеством способов. Простое подражание ничему не научит.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
как сделать что-бы картинка не размножалась?..

в стилях указать no-repeat

koil, вы пытаетесь решить проблему исключительно через HTML, а ведь есть же ещё CSS, в vB стили находятся в опциях стиля. В дополнительных определениях CSS вы даже можете ввести свои классы.

в IE картинка искажаясь, безообразно растянулась по высоте.

Да, с этим браузером вечно мука... для него вставляются условные комментарии обычно, но это особая песня...


Непонятно зачем в двух местах параметр width=
В одном месте за фон отвечает в другом за картинку?

в td указывается ширина ячейки таблицы, а в img ширина картинки - они же могут различаться...
кстати, почему у вас ширина ячейки 0?


И где, и как можно заменить фон форума на картинку?
Фон - то что здесь черного цвета. Второй фон темно-серый.
Именно не просто цвет, а замена на рисунок.

Это надо было бы спросить в разделе vb... Стили и шаблоны - опции стиля, там будут окошки и для body и для .page
в строке "фон" указывается не цвет, а url('http://....jpg') 100% 0% no-repeat (к примеру)


Здесь вот, к примеру, сверху справа, серая табличка "добро пожаловать Koil"
выходит за границу форума. За границу серого цвета, уходя в черное..
В итоге весь форум сдвинут влево.
Мне это не мешает конечно, в окно все помещается..

Это уже не лого... а навбар, но да, сдвинуто немного, если разрешение 1024. При большем уже всё нормально.
 

koil

Пользователь
Регистрация
16.01.13
Сообщения
577
Реакции
98
Баллы
13
в стилях указать no-repeat
вот мне не всегда понятно такое указание..
куда вставлять? ниже строчки с картинкой или выше?

(еще не понимаю слово "обрамлять".. это же значит наверху и внизу.. а дается только одна строчка.. ставить ее снизу и сверху?)

koil, вы пытаетесь решить проблему исключительно через HTML, а ведь есть же ещё CSS, в vB стили находятся в опциях стиля. В дополнительных определениях CSS вы даже можете ввести свои классы.
Это потому что не разбираюсь что такое CSS.
Ну в общем понятно. Спасибо. Покопаюсь..

в td указывается ширина ячейки таблицы, а в img ширина картинки - они же могут различаться...
кстати, почему у вас ширина ячейки 0?
Решил таким образом устранить ее влияние на размеры картинки.
И ничего, получилось.. смотрится замечательно..

в строке "фон" указывается не цвет, а url('http://....jpg') 100% 0% no-repeat (к примеру)
"http://" обязательно? или можно указать относительный путь?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
вот мне не всегда понятно такое указание..
куда вставлять? ниже строчки с картинкой или выше?

Стили указываются (варианты):
  1. в тегах style на странице (на статических сайтах)
  2. в самой строке, атрибутом style нужного тега (div style="background...")
  3. в таблице стилей в отдельном файле (для vB - стили и шаблоны - опции стиля)

Это потому что не разбираюсь что такое CSS.

Каскадные таблицы стилей. Расширяют возможности по оформлению, грандиозно расширяют.

И ничего, получилось.. смотрится замечательно..

Ну, видимо, браузер подставил auto...

или можно указать относительный путь?

Можно. Только не ошибитесь)
 

Dja

Пользователь
Регистрация
08.04.13
Сообщения
76
Реакции
14
Баллы
3
Адрес
Москва
Ничего не понял.
Объясните для танкиста.:pardon:
Установил 3.8.4., русифицировал, больше ничего не делал.
Вверху слева - логотип vBulletin, и он же работает как ссылка на главную страницу форума.
Вместо него надо поставить картинку logo.gif размером 326 на 214.
Напротив него в правый верхний угол загнать картинку logo2.gif размером 285 на 214.
Между картинками на дефолтном фоне вставить название форума текстом.
Вопросы:
- куда загружать картинки? форум при сайте, т.е. ...../public_html/forum
- какой файл (шаблон?) править... где он находится... какой файл открывать в блокноте?
- ну и что туда вписывать и после чего (или перед чем) :)
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Зачем? Там в общем-то теоретический урок, используя который можно работать над самыми разнообразными элементами.
Здесь ссылки на темы по конкретике, не относящейся к уроку.
 

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.876
Новый пользователь
pm1199
Сверху Снизу