Ночная странница
Пользователь
- Регистрация
- 30.01.12
- Сообщения
- 1.751
- Реакции
- 965
- Баллы
- 28
- Возраст
- 47
Я не буду теоретизировать… или вернее, я буду не только теоретизировать... вы должны всё попробовать сами. Я просто хочу показать (и покажу), как можно добавить картинку в ЛЮБОЙ блок – будь то шапка, подвал, статья… Потратьте на это час своего времени и в дальнейшем у вас будет гораздо меньше вопросов. вы будете это УМЕТЬ.
Чтобы всё испробовать «вживую», создайте на рабочем столе папочку, в нее положите любую картинку и создайте простейший html-документ. Картинку можно взять и эту, например.
Размеры пометьте себе сразу – это важно. В данном случае они равны 259 на 194 px.
Поехали? Все стили и изменения я буду комментировать.
Особенность этого варианта в том, что блок не отрегулирован по высоте и потому просто «обтекает» картинку.
А что будет, если принудительно задать его высоту, чуть больше, чем у картинки? (меняем стиль контейнера, картинку не трогаем)
По умолчанию картинка располагается в левом верхнем углу, но её можно и подвинуть… Создадим блок объявлений для селектора .cont img (то есть для всех изображений, находящихся внутри блока cont).
Варианты «двигания» могут быть различны, как пример:
или
но это уже совсем другая тема. Важно, что размер картинки при этом не меняется!
Допустим, теперь мы хотим увеличить картинку. Эту же.
Легко.
.cont img {
height: 250px;
}
Вы замечаете, что качество стало хуже? Если оно вас ещё устраивает – дерзайте, в противном случае ищите картинку больше. Точно так же можно принудительно указать и ширину…
Картинку «растянет». В случае, если это надпись или какой-то абстрактный рисунок, возможно, кого-то это и устроит… Растянуть картинку можно и на всю ширину… и на конкретную ширину в пикселах.
Если при этом не указывать высоту, то картинка изменится пропорционально своему исходному размеру, иногда выходя за пределы блока.
Можно, конечно, это запретить…
.cont {
overflow: hidden;
}
На сегодня, наверное, достаточно… Как ставить картинку не через тег IMG, а на фон блока, я расскажу… завтра.
Зачем это нужно (через фон)? Например, чтобы сверху расположить надпись…
[OFF]Профи, не поправляйте меня, пожалуйста… я знаю, что надпись можно разместить и поверх этой картинки… но тема-то для новичков…[/OFF]
Чтобы всё испробовать «вживую», создайте на рабочем столе папочку, в нее положите любую картинку и создайте простейший 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]