Как изменить размер фонового изображения с помощью css3

Использовать :after.

:after

<style type="text/css">
.kartinka {text-align: center;}

.kartinka input {display:none;}

.kartinka label {cursor:pointer;}

.kartinka label:after {display: inline-block; width: 100%;}

.kartinka input:nth-of-type(1):checked ~ label:nth-of-type(4):after {content: url(изо1);}

.kartinka input:nth-of-type(2):checked ~ label:nth-of-type(4):after {content: url(изо2);}

.kartinka input:nth-of-type(3):checked ~ label:nth-of-type(4):after {content: url(изо3);}

.kartinka input:nth-of-type(4):checked ~ label:nth-of-type(4):after {content: url(изо4);}
</style>

<figure class="kartinka">
<input type="radio" checked="checked" name="raz" id="kartinka1"/><label for="kartinka1">200</label> <input type="radio" name="raz" id="kartinka2"/><label for="kartinka2">300</label> <input type="radio" name="raz" id="kartinka3"/><label for="kartinka3">400</label> <input type="radio" name="raz" id="kartinka4"/><label for="kartinka4">500</label></figure>

200 300 400 500

Способ 1. Как изменить размер изображения в Microsoft Paint

  1. Найдите и запустите MS Paint . Он предустановлен на всех версиях операционной системы Windows. Пуск> Все программы> Стандартные> Paint :
  1. Перетяните изображение в окно Paint или используйте Меню> Открыть (Ctrl + O) .
  2. В главном меню программы найдите пункт «Изменить размер » и выберите его:
  1. Откроется панель изменения размеров и пропорций изображения. Значение вы можете указать в пикселях. Не забудьте установить флажок «Сохранять пропорции ». Иначе изображение будет деформировано:
  1. Чтобы увеличить размер картинки, нажмите кнопку «ОК » и сохраните фотографию.

Советы:

  • Если не получается задать нужные размеры фотографии, не растягивая ее, вы можете использовать инструмент «Обрезка », чтобы удалить ненужные края. Как это сделать, описано в пункте 3 ;
  • Чтобы быстрее открыть фотографию, кликните по ней правой кнопкой мыши и выберите из контекстного меню пункт «Открыть с помощью Paint »;
  • Лучше всего сохранять изображение в том же формате, что и оригинал.

Способ 2. Как изменить размер изображения в MS Photo Gallery

  1. Если Microsoft Photo Gallery не установлена на вашем компьютере (Пуск> Фотогалерея ), вам необходимо скачать и установить его как часть Windows Essentials 2012 ;
  2. Запустите MS Photo Gallery и найдите свой графический файл;
  3. Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер …»:
  1. Выберите готовый пресет: «Малый 640 пикселей », «Средний 1024 », «Большой 1280 » и т.д.
  1. Нажмите «Изменить размер и сохранить ». После того, как увеличите размер картинки, изображение будет размещено в той же папке, в ней также останется оригинал.

Советы:

  • Если нужно задать точный размер изображения, в выпадающем меню выберите пункт «Пользовательский » и установите размер для большей стороны фотографии;
  • Чтобы изменить размер нескольких фотографий одновременно, выберите их, удерживая нажатой клавишу Ctrl .

Способ 3. Как изменить размер изображения в Photoscape

Можно увеличить размер картинки в Фотошопе. Или использовать для этого Photoscape .

  1. Загрузите Photoscape и установите его. Запустите программу;
  2. Перейдите на вкладку «Редактор » и найдите фотографию, которую хотите изменить:
  1. В нижней части изображения находится кнопка «Изменить размер », нажмите на нее.
  2. Задайте новый размер фотографий. Убедитесь, что опция «Сохранять соотношение сторон » включена и нажмите кнопку «OK »:
  1. Сохраните отредактированное изображение.

Советы:

  • Если необходимо изменить размер нескольких изображений, используйте вкладку «Пакетный редактор ». Добавьте папку и измените размер всех фотографий в ней;
  • Если вы не знаете точный размер, можно задать «Процент » от исходного размера.

Способ 4. Как изменить размер изображения в IrfanView

  1. Установите IrfanView — отличный инструмент для просмотра и увеличения размера картинки;
  2. Добавьте фотографию, перетянув ее в окно программы, или нажав первую кнопку в панели инструментов:
  1. Перейдите на вкладку «Изображение », выберите «Изменить размер /пропорции » (Ctrl + R

    );


  2. Установите новый размер в пикселях, сантиметрах, дюймах, или в процентах от исходного изображения:
  1. Сохраните изображение.

Советы:

  • Вы можете использовать стандартные размеры: 640 на 480 пикселей, 800 на 600 пикселей, 1024 на 768 пикселей и т.д.;
  • Чтобы сохранить высокое качество фотографий, убедитесь, что для параметра DPI задано значение не менее 300.

Способ 5. Как изменить размер изображения онлайн

  1. Чтобы увеличить размер картинки онлайн, перейдите на сайт PicResize .
  2. Нажмите кнопку «Browse

    », чтобы выбрать фотографию. Нажмите «Continue

    »:

  1. Выберите процент от исходного изображения, например на 50% меньше. Инструмент отобразит размер изображения на выходе. В качестве альтернативы можно ввести точный размер, выбрав в выпадающем меню пункт «Custom Size

    »:

Как увеличить изображение с помощью скрипта JavaScript.

Опять таки способов реализации довольно много. И здесь важен индентификатор, например, miniatuyra1.

<script>var imgbase = "маленькое_изо"; function cambiarla() { document.getElementById("miniatuyra1").src = "исходное_изо"; }</script>

<img id="miniatuyra1" src="маленькое_изо"/>
<a href="javascript: cambiarla();">Щелчок</a> &#8660; <a href="javascript:void(0);" onclick="document.getElementById('miniatuyra1').src=imgbase;">Отмена</a>

Щелчок ⇔ Отмена

<a href="javascript:void(0);" onmouseover="getElementById('miniatuyra2').src='оригинальный_размер';" onmouseout="getElementById('miniatuyra2').src='уменьшенная_копия';"><img src="уменьшенная_копия" id="miniatuyra2" /></a>

Также посмотрим на тот скрипт, при котором изменения происходят по щелчку мышки.

<script>function miniatuyra3(cual,url) {var imagen1 = "уменьшенная_картинка";var imagen2 = "исходный_рисунок";var imagenactual = cual.src;if(imagenactual==imagen1) {cual. src = imagen2;} else  {cual. src = imagen1;}}</script>

<img onclick="miniatuyra3(this);" src="уменьшенная_картинка"/>

И тот, которым могут воспользоваться пользователи Picasa (подробнее).

| | | | |

  1. Картинка по размеру экрана на CSS
  2. Изменить изображение при наведении

Расширить изображение с помощью свойства transform.

Авторсвойство transform CSS

<style type="text/css">
figure.vkl2 {
  width: 140px;
  background: white;
  box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  text-indent: 0px;
  text-align: center;
  padding: 5px;
  z-index: 100;
}

figure.vkl2 img {width: 100%; padding: 0px;}

figure.vkl2:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(1deg);
  box-shadow: 0 2px 3px #666;
}

figure.vkl2:focus {
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5); -o-transform: rotate(-3deg) scale(2.5); -ms-transform: rotate(-3deg) scale(2.5);
  box-shadow: 0 2px 3px #666;
}
</style>

<figure tabindex="1"><img src="адрес_картинки" /><figcaption>Текст</figcaption></figure>

Прыжки с шестом

Способ 2: background-image

Другой способ вставки изображений – установка их в качестве фонового изображения блока. Этот способ попал сюда за то, что у фонового изображения есть свойство background-size с двумя полезными значениями: contain и cover. Первое умещает изображение целиком с сохранением пропорций (и образованием полей), второе растягивает изображение таким образом, чтобы полей не осталось, также с сохранением пропорций и при необходимости обрезая лишнее.  

<html>
  <head>
    <style>
      .wrapper {
        width: 300px;
        height: 300px;
        border: 5px solid #515151;
      }
      .exmp2 {
        background-image: url(/images/braineater.png);
        background-repeat: no-repeat;
        background-position: -40px 0px;
        background-size: cover;
      }
    </style>
  </head>

  <body>
    <div class="wrapper exmp2"></div>
  </body>
</html>

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

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения. Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства. В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров. В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях

Атрибуты

Как я уже говорил выше, тег img сразу идет в комплекте с атрибутом src. Ну я думаю, что вы уже поняли это, поэтому будем изучать остальные. Здесь есть где развернуться. Атрибутов здесь просто дофигища. Простите за мой французский).

Alt

Если вдруг картинка по какой-либо причине не прогрузилась или недоступна, что вы увидите текст, который был написан в значении атрибута Alt. Обычно здесь пишется то, что изображено на картинке, т.е. если изображено что-то про национальности, то и в alt лучше всего так и написать «Мужчины и женщины разных национальностей». На примере это выглядит так:

В итоге, если картинка по какой-то причине не сможет отображаться, то вылезет наша надпись.

В принципе вы вообще можете ничего не прописывать в качестве альтернативного текста, но сам атрибут лучше оставить, пусть даже и пустым.

Width и Height


Для тех, кто знает английский язык нетрудно догадаться, что данные два атрибута отвечают за ширину и высоту изображения. Я решил объединить две этих штуковины в один пункт, так как они выполняют похожие функции, можно сказать — братья (ну или сестры).

Width отвечает за ширину изображения, а в его значениях ставится сам размер.  В общем если у вас есть картинка, например, 640*480 пикселей, а вам нужно отобразить ее на сайте 320*240, то вам просто нужно будет сделать следующее:

Всё. Теперь, когда вы сохраните документ и откроете его с помощью браузера, то вы увидите уменьшенную кртинку. Причем заметьте, мы изменили только параметр ширины, а картинка уменьшилась пропорционально, т.е. высота уменьшилась автоматически.

Height, как уже нетрудно догадаться, отвечает за высоту изображения. Тут всё работает точно также, но по вертикали. Возьмем ту же самую картинку, только не будем ставить ширину, а поставим только высоту.

Сохраняем и заходим в документ. Как видим, картинка уменьшилась до того же размера, что и в предыдущем примере, хотя мы задали на сей раз только высоту. Вы уже поняли, что тут все действует в рамках пропорций, поэтому оба параметра смысла ставить в принципе нет никакого.

Давайте ради интереса попробуем поставить атрибуты и ширины, и высоты одновременно, только зададим им непропорциональные параметры. Ну а потом посмотрим, что у нас получится.

Сохраняем, и теперь смотрим, что нам выдало. Мда, это что-то непропорциональное). В общем я думаю, что суть вы всю уловили. Попрактикуйтесь сами немного, чтобы закрепить работу с размерами, ну а потом перейдем к следующему атрибуту.

Однопиксельные рисунки

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

В стандартном режиме нас ожидают те же проблемы, что и при использовании обычных рисунков внутри ячеек. Высота ячейки будет расширена, поскольку к изображениям добавляется отступ снизу. Решается эта проблема гораздо проще и не требует использование дополнительного стиля. Современные браузеры прекрасно отображают заданные размеры ячеек и без наличия дополнительных изображений внутри. Поэтому достаточно просто удалить однопиксельный рисунок из ячейки.

Было:

<td><img src=»images/1×1.gif» width=»1″ height=»1″ alt=»»></td>

Стало:

<td class=»line»></td>

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения значение 100%.

<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(function() {   

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {

                    $bg
                        .removeClass()
                        .addClass('bgheight');

                } else {

                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
        }

        theWindow.resize(function() {

                resizeBg();

        }).trigger("resize");

});

Работает в:

  • IE7+ (с заглушками, вероятно, будет работать и в IE6)

  • Во всех остальных браузерах.

Карты-изображения

Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тега <map>, а области-ссылки в них с помощью тега <area>. Атрибут name тега <map> связан с атрибутом usemap и создает связь между изображением и картой.

Пример карты-изображения (по фрагментам изображения можно щелкать):

Пример: Создание карты изображений

  • Результат
  • HTML-код
  • Попробуй сам »


Атрибуты тега <area>:

Название атрибута Описание
shape Очертания области. Возможные значения атрибута: rect – прямоугольник; circle – круг; poly – многоугольник.
coords Координаты области: Для прямоугольника – координаты левого верхнего и правого нижнего углов. Для круга – координаты центра и радиус. Для многоугольника – координаты всех углов.
href URL-адрес файла, на который делается ссылка.
title Всплывающий текст, появляющийся при наведении курсора на заданную область.
alt Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Положение фонового рисунка</title> <style> body { background: url(/example/image/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */ margin-right: 200px; /* Отступ справа */ } </style> </head> <body> <h1>Консервы из помидор</h1> <p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8, трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.</p> <p>Примерный расход сырья и продуктов на литровую банку: помидоров красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.</p> </body> </html>

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру);
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

Добавление на страницу картинки (используем тег )

Подготовьте и поместите в файл картинки. Для примера, пусть это будет изображение окна браузера — (скачать), которое поместите в нашу обозначенную папку:

Рис. 2. Файл «brauzer.jpg»

Откроем и найдём в нём следующее:

Код 2. Место для вставки картинки

И рядом (или вместо этого кода) добавим HTML подготовленной картинки:

Код 3. Код картинки — тег

Должно получиться следующее:

Рис. 3. Тег картинки в коде

То есть — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.

Для настройки в основном используют следующие атрибуты:

  • — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — ), так и абсолютный адрес вашего сайта или любого другого ресурса (например, )
  • и — ширина и, соответственно, высота картинки в пикселях. В я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.

    При этом, конечно же, при указании бо́льших размеров, картинка будет терять в качестве, а при задании меньших (если размеры уменьшены не пропорционально) — искажаться, вписываясь в указанные параметры.

    Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим ).


  • — альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет-читалками (скринридерами).

    Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.

  • — всплывающая подсказка при наведении мышью на изображение. Если нет явной необходимости, то данный параметр веб-мастерами часто не используется.

После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось:

Рис. 4. Результат вставки изображения (пока без стилизации)

Изображения в качестве фона.

Чтобы использовать изображение в качестве фона для всей страницы, используем свойство background для селектора html. В значении прописываем путь к изображению. Правилом хорошего тона является вместе с изображением задавать ещё и цвет фона на случай, если картинка вдруг не загрузится.

html {background: #D2BFB0 url(images/img1.jpg); }

Повторяемость фонового изображения.

По умолчанию фоновое изображение повторяется как по горизонтали так и по вертикали. Чтобы это отменить для свойства background пишем значение no-repeat.

html {background: #D2BFB0 url(images/img1.jpg) no-repeat; }

Чтобы картинка повторялась только по горизонтали, пишем

background: repeat-x;

по вертикали:

background: repeat-y;

Расположение фонового изображения.

Картинка в левом верхнем углу:  background: left top;

В правом верхнем углу: background: right top;

В левом нижнем углу: background: left bottom;

В правом нижнем углу: background: right bottom;

По центру: background: center;

По центру вверху: background: center top;

По центру внизу: background: center bottom;

Фиксация фонового изображения.

По умолчанию фоновое изображение прокручивается вместе с контентом.

Чтобы его зафиксировать, свойству background задаём значение fixed.

html { background: #D2BFB0 url(images/img1.jpg) no-repeat center fixed; }


С этим читают