Инструкция
Вначале попробуйте найти картинку с помощью поисковых систем. Введите запрос, а затем выберите вкладку с настройками поиска. У Google, например, это кнопка «Инструменты поиска», а у Яндекса иконка с изображением ползунков. После нужно выбрать пункт «Размер» и указать точные значения. Или, например, если нужна фотография с хорошим разрешением, выделить «Большие».
Если картинки с нужным размером нет, то ее можно подогнать под рамки самостоятельно. Тут есть пути. Первый заключается в том, что вы сначала создаете документ с нужным размером, а затем изменяете картинку. Второй противоположный – открываете картинку и меняете размер. Разницы, по сути, нет: все зависит от ваших предпочтений и целей. Примеры будут рассматриваться в программе Adobe Photoshop, но вы можете использовать и другие графические редакторы.
Первый способ. Нажмите «Файл» - «Создать…» или же комбинацию клавиш Ctrl+N. Перед вами появится окно с настройками. Укажите там параметры ширины, высоты и необходимого цветового разрешения. Затем откройте понравившееся изображение в браузере, нажмите правую кнопку мыши и выберите пункт «Копировать картинку». Затем вернитесь в программу и нажмите комбинацию Ctrl+V.
Картинка появится в окне графического редактора. Затем нажмите «Редактирование» - «Свободное трансформирование» или комбинацию Ctrl+T. Появится ключевые точки, с помощью которых вы сможете подогнать картинку под величину рабочего окна. Как только вы получите желаемый результат (кстати, можно выходить за границы рабочей зоны), нажмите «Файл» - «Сохранить как…» или комбинацию клавиш Ctrl+S.
Второй способ. Вам необходимо сначала на компьютер, затем нажать «Файл» - «Открыть…» (или комбинацию Ctrl+O) и выбрать необходимое изображение. После выберите «Изображение» - «Размер изображения…» или нажмите комбинацию Alt+Ctrl+I. Снимите галочку «Сохранять пропорции» и укажите нужный размер. Затем нажмите клавишу ОК.
Этот урок является своеобразным продолжением предыдущего, в котором мы рассматривали , теперь пора углубить ваши познания и посмотреть CSS свойства изображения.
Размеры изображения в CSS
Давайте разберемся, что здесь нового, я создал класс img в котором прописал размеры изображения, width это ширина, а height у нас высота, размеры я указал больше оригинальных, чтобы вы наглядно могли видеть, как изменится изображение.
Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать свойство margin которое даст вам возможность оценить его возможности.
Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать изображение без задания отступов чтобы вы наглядно могли увидеть разницу.
В браузере мы видим следующее:
Отступы от изображения в данном примере я сделал благодаря параметру margin который задал нам отступы от всех четырех краев по 20 пикселей. Здесь можно сделать более хитрую манипуляцию, можно задавать отступ от конкретного края, например:
- margin-top – отступ от верхней стороны
- margin-right – отступ от правой стороны
- margin-bottom – отступ от нижней стороны
- margin-left – отступ от левой стороны
Соответственно здесь вы можете настроить все более тонко, или же задать отступ всего от одной или двух сторон не трогая другие.
В браузере:
Задаем рамку вокруг изображения, благодаря параметру border для начала зададим ширину рамки с помощью border-width задаем её в пикселях, далее стиль рамки, то есть её вид border-style здесь есть несколько значений выбирать вам:
И последний параметр, который мы будем регулировать это цвет рамки, который задается параметром border-color.
В браузере видим:
Как вы поняли мы присвоили фон тегу body благодаря селектору тегов, так как он у нас занимает весь документ, так же мы можем присвоить и другим тегам. Параметр background сделал нам фон рисунком адрес к которому мы прописываем в скобочках. Так же можно и манипулировать с фоном например:
background: url(proba.png) repeat-x;
Фон будет повторяться только по оси X то есть горизонтально в одну линию.
background: url(proba.png) repeat-y;
Фон будет повторяться только по оси Y то есть вертикально в одну линию.
background: url(proba.png) no-repeat;
Фон не будет повторяться, а появится лишь одно изображение.
background-size: 500px 200px;
Это дополнительный параметр, который задает размер изображения для фона, ширина и высота.
Прозрачность изображения с помощью CSS
В браузере видим следующее:
Это свойство пришло с появлением CSS3 и собственно получило достаточно обширное применение. Реализуется с помощью параметра opacity задает прозрачность изображения, значения от 0 до 1, а второй параметр filter: alpha(Opacity=50); делает тоже самое только для браузера Internet Explorier так как старые версии не поддерживают параметр opacity, значения от 0 до 100. В примере я специально сделал два изображения, чтобы наглядно было видно разницу.
На этом урок «CSS свойства изображения» заканчивается, я надеюсь этот урок был вам полезен и вдохновил на дальнейшее изучения языка и получение новых знаний.
Дата публикации:2014-04-22
Вы не знаете, как увеличить размер картинки? Это очень простая задача, так как все, что вам нужно, уже установлено на вашем компьютере. Прочитайте это руководство, и вы узнаете, как изменять размер фотографии с помощью 5 простых инструментов.
Способ 1. Как изменить размер изображения в Microsoft Paint
- Найдите и запустите MS Paint . Он предустановлен на всех версиях операционной системы Windows. Пуск> Все программы> Стандартные> Paint :
- Перетяните изображение в окно Paint или используйте Меню> Открыть (Ctrl + O) .
- В главном меню программы найдите пункт «Изменить размер » и выберите его:
- Откроется панель изменения размеров и пропорций изображения. Значение вы можете указать в пикселях. Не забудьте установить флажок «Сохранять пропорции ». Иначе изображение будет деформировано:
- Чтобы увеличить размер картинки, нажмите кнопку «ОК » и сохраните фотографию.
Советы:
- Если не получается задать нужные размеры фотографии, не растягивая ее, вы можете использовать инструмент «Обрезка », чтобы удалить ненужные края. Как это сделать, описано в пункте 3 ;
- Чтобы быстрее открыть фотографию, кликните по ней правой кнопкой мыши и выберите из контекстного меню пункт «Открыть с помощью Paint »;
- Лучше всего сохранять изображение в том же формате, что и оригинал.
Способ 2. Как изменить размер изображения в MS Photo Gallery
- Если Microsoft Photo Gallery не установлена на вашем компьютере (Пуск> Фотогалерея ), вам необходимо скачать и установить его как часть Windows Essentials 2012 ;
- Запустите MS Photo Gallery и найдите свой графический файл;
- Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер …»:
- Выберите готовый пресет: «Малый 640 пикселей », «Средний 1024 », «Большой 1280 » и т.д.
- Нажмите «Изменить размер и сохранить ». После того, как увеличите размер картинки, изображение будет размещено в той же папке, в ней также останется оригинал.
Советы:
- Если нужно задать точный размер изображения, в выпадающем меню выберите пункт «Пользовательский » и установите размер для большей стороны фотографии;
- Чтобы изменить размер нескольких фотографий одновременно, выберите их, удерживая нажатой клавишу Ctrl .
Способ 3. Как изменить размер изображения в Photoscape
Можно увеличить размер картинки в Фотошопе. Или использовать для этого Photoscape .
- Загрузите Photoscape и установите его. Запустите программу;
- Перейдите на вкладку «Редактор » и найдите фотографию, которую хотите изменить:
- В нижней части изображения находится кнопка «Изменить размер », нажмите на нее.
- Задайте новый размер фотографий. Убедитесь, что опция «Сохранять соотношение сторон » включена и нажмите кнопку «OK »:
- Сохраните отредактированное изображение.
Советы:
- Если необходимо изменить размер нескольких изображений, используйте вкладку «Пакетный редактор ». Добавьте папку и измените размер всех фотографий в ней;
- Если вы не знаете точный размер, можно задать «Процент » от исходного размера.
Способ 4. Как изменить размер изображения в IrfanView
- Установите IrfanView — отличный инструмент для просмотра и увеличения размера картинки;
- Добавьте фотографию, перетянув ее в окно программы, или нажав первую кнопку в панели инструментов:
- Перейдите на вкладку «Изображение », выберите «Изменить размер /пропорции » (Ctrl + R );
- Установите новый размер в пикселях, сантиметрах, дюймах, или в процентах от исходного изображения:
- Сохраните изображение.
Советы:
- Вы можете использовать стандартные размеры: 640 на 480 пикселей, 800 на 600 пикселей, 1024 на 768 пикселей и т.д.;
- Чтобы сохранить высокое качество фотографий, убедитесь, что для параметра DPI задано значение не менее 300.
Способ 5. Как изменить размер изображения онлайн
- Чтобы увеличить размер картинки онлайн, перейдите на сайт PicResize .
- Нажмите кнопку «Browse », чтобы выбрать фотографию. Нажмите «Continue »:
- Выберите процент от исходного изображения, например на 50% меньше. Инструмент отобразит размер изображения на выходе. В качестве альтернативы можно ввести точный размер, выбрав в выпадающем меню пункт «Custom Size »:
Для изменения размеров рисунка средствами HTML у тега
предусмотрены атрибуты width
(ширина) и height
(высота). В качестве значения используются пикселы, при этом аргументы должны
совпадать с физическими размерами картинки. Например, на рис. 10.6
показано изображение, которое имеет размеры 100х111 пикселов.
Рис. 10.6. Картинка исходного размера
Соответственно, HTML-код для размещения данного рисунка, приведен в примере 10.4.
Пример 10.4. Размеры рисунка
Если размеры изображения указаны явно, то браузер использует их для того, чтобы отображать соответствующую картинке пустую область в процессе загрузки документа (рис. 10.7). В противном случае браузер ждет, когда рисунок загрузится полностью, после чего меняет ширину и высоту картинки (рис. 10.8). При этом может произойти переформатирование текста, поскольку первоначально размер картинки не известен и автоматически он устанавливается небольшим.
Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась
Рис. 10.8. Картинка загружена, текст переформатирован
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.
На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.
Рис. 10.9. Вид картинки, увеличенной в браузере
Код для такого рисунка останется практически неизменным и показан в примере 10.5.
Пример 10.5. Изменение размера рисунка
Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.10 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.
Рис. 10.10. Увеличенное изображение
Браузеры используют два алгоритма для ресемплирования - бикубический (дает сглаженные границы и плавный тоновый диапазон цветов) и по ближайшим точкам (сохраняет первоначальный набор цветов и резкость краев). Последние версии браузеров применяют бикубический алгоритм, а старые браузеры, наоборот, алгоритм по ближайшим точкам.
