Как изменить размер картинки css

Изменение размера изображений

Научитесь с легкостью изменять размер изображений в Photoshop без потери качества!

ВАМ ПОМОЖЕТ ПРИЛОЖЕНИЕ!

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

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

Изменение размеров изображений в Photoshop

Чтобы использовать функцию «Размер изображения» в Photoshop и изменять размер изображения по своему усмотрению, выполните следующие действия:

Откройте изображение в Photoshop и выберите команду «Изображение > «Размер изображения» .

• Чтобы изменить размер окна просмотра, перетащите угол диалогового окна «Размер изображения» и измените его размер.
• Чтобы просмотреть другую область изображения, перетащите значок руки, который отображается в режиме предварительного просмотра.
• Чтобы изменить масштаб просмотра, удерживая нажатой клавишу Ctrl (Windows) или Command (Mac OS), щелкните мышью в изображении предварительного просмотра для увеличения масштаба. Удерживая нажатой клавишу Alt (Windows) или Option (Mac OS), щелкните мышью для уменьшения масштаба. После нажатия кнопки мыши процент увеличения в течение короткого периода отображается в нижней части изображения в режиме предварительного просмотра.

Изменение параметров изменения размера изображения

• Выбрать стиль для изменения размера изображения.
• Выберите «Автоматическое разрешение», чтобы изменить размер изображения для определенного выходного варианта печати. В диалоговом окне «Автоматическое разрешение» укажите значение для параметра «Экран» и выберите «Качество». Можно изменить единицу измерения, выбрав требуемый вариант в меню справа от текстового поля «Экран».

Сохранение пропорций : чтобы сохранить исходные пропорции ширины и высоты, убедитесь, что параметр» Сохранить пропорции» включен. Если требуется масштабировать ширину и высоту независимо друг от друга, нажмите на значок «Сохранить пропорции» (значок связи») для удаления связи между ними. Можно изменить единицы измерения ширины и высоты, выбрав требуемый вариант в меню справа от текстовых полей «Ширина» и «Высота».

Ширина/Высота : введите значения «Ширина» и «Высота». Чтобы указать значения в другой единице измерения, выберите требуемый параметр в меню рядом с текстовыми полями «Ширина» и «Высота». Новый размер файла изображения появляется в верхней части диалогового окна «Размер изображения» (старый размер указывается в скобках).

Разрешение : чтобы изменить разрешение, введите новое значение. (Необязательно) Можно также выбрать другую единицу измерения.

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

Если изображение содержит слои с примененными к нему стилями, выберите пункт Масштабировать стили с помощью значка шестерни для масштабирования воздействия стилей на изображение с измененными размерами. Эта функция доступна только в том случае, если выбран параметр Сохранить пропорции .

По окончании изменения настроек нажмите кнопку «ОК».

Чтобы восстановить исходные значения, отображаемые в диалоговом окне «Размер изображения», выберите «Исходный размер» в меню «Подогнать под» или, удерживая нажатой клавишу «Alt» (Windows) или «Option» (Mac OS), нажмите «Восстановить».

Масштабирование и изменение размеров картинок с помощью canvas

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

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

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

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

На конечный результат можно посмотреть, перейдя на страницу «демо», ссылка на которую находиться в конце статье и там найти ссылку со всем кодом.

Начнем же наш не простой путь!

Немного верстки для нашего урока

Мы начнем с верстки исходного изображения, которое будет подвергаться обработке:

Все! Для этого инструмента HTML больше не понадобится.

Добавим чуть-чуть CSS красоты

Для начала нужно определить свойства для элементов .resize-container и для фото:

.resize-container < position: relative; display: inline-block; cursor: move; margin: 0 auto; >.resize-container img < display: block >.resize-container:hover img, .resize-container:active img

Теперь определим координаты и свойства элементов resize-handle . Это маленькие квадратики, при помощи которых пользователь будет увеличивать или уменьшать изображение:

.resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw < position: absolute; display: block; width: 10px; height: 10px; background: rgba(222, 60, 80, 0.9); z-index: 999; >.resize-handle-nw < top: -5px; left: -5px; cursor: nw-resize; >.resize-handle-sw < bottom: -5px; left: -5px; cursor: sw-resize; >.resize-handle-ne < top: -5px; right: -5px; cursor: ne-resize; >.resize-handle-se

Начинаем творить магию используя JavaScript

При работе с JavaScript нужно начать с определения переменных и инициализации canvas и изображения:

var resizeableImage = function(image_target) < var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = <>, constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement('canvas'); >); resizeableImage($('.resize-image'));

Дальше необходимо создать функцию init(), работа которой начинается сразу же. Данная функция «помещает» изображение в контейнер, создает размерные ручки и дублирует исходное фото для изменения его размера. Объект jQuery контейнера нужно привязать к переменной, чтобы потом к нему обращаться. Кроме того, добавляем блок прослушивателя событий mousedown: он будет «узнавать» о движении размерных ручек.

var resizeableImage = function(image_target) < // . init = function()< // Создаем копию исходного фото // Исходник всегда будет использоваться для изменения размера orig_src.src=image_target.src; // Добавляем размерные ручки $(image_target).wrap(' ') .before(' ') .after(' ') .after(' '); // Привязываем контейнер к переменной $container = $(image_target).parent('.resize-container'); // Добавляем прослушку событий $container.on('mousedown', '.resize-handle', startResize); >; //. init(); >

Единственная задача написанных на JavaScript методов startResize() и endResize() – донести до компьютера, когда нужно обратить внимание на движение курсора.

startResize = function(e)< e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on('mousemove', resizing); $(document).on('mouseup', endResize); >; endResize = function(e)< e.preventDefault(); $(document).off('mouseup touchend', endResize); $(document).off('mousemove touchmove', resizing); >;

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

saveEventState = function(e)< // Сохраняем исходные детали и данные о контейнере event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset().left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft(); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop(); // Это исправление для мобильной версии Safari // По каким-то причинам здесь нельзя сделать копию информации о касаниях if(typeof e.originalEvent.touches !== 'undefined')< event_state.touches = []; $.each(e.originalEvent.touches, function(i, ob)< event_state.touches[i] = <>; event_state.touches[i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; >); > event_state.evnt = e; >

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

resizing = function(e)< var mouse=<>,width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop(); width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; if(constrain || e.shiftKey) < height = width / orig_src.width * orig_src.height; >if(width > min_width && height > min_height && width < max_width && height < max_height)< resizeImage(width, height); // Без этого Firefox не сможет пересчитать размеры изображения, пока ручки не перестанут передвигаться $container.offset(); > >

Далее добавим функцию, которая оставит соотношение сторон нетронутым, если при изменении размера зажата клавиша «shift».

Наконец перейдем к изменению размера фотографии. Главное, чтобы новые значения ширины и высоты не выходили за пределы ограничений, заданных изначально.

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

Меняем размеры изображения JavaScript

Переместить изображение на холст можно при помощи drawImage. Сначала нужно установить высоту и ширину холста, пользуясь командами JavaScript resize, а затем воспользоваться только исходной копией изображения. К холсту применяется команда toDataURL, благодаря чему мы получаем закодированную в Base64 новую версию фото, которая помещается на страницу.

resizeImage = function(width, height)< resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height); $(image_target).attr('src', resize_canvas.toDataURL("image/png")); >;

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

Изменение размера картинки с разных углов

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

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

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

Нельзя изменить то, что задано по умолчанию, но можно схитрить. Когда пользователь потянет за размерную ручку, находящуюся не в правом нижнем углу, будет меняться положение всего изображения таким образом, чтобы казалось, что противоположный угол и прилежащие к нему стороны остаются на своих местах. Для этого нужно обновить метод resizing:

resizing = function(e)< var mouse=<>,width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop(); // Изменим положение фотографии в зависимости от того, за какую размерную ручку тянет юзер if( $(event_state.evnt.target).hasClass('resize-handle-se')) < width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; >else if($(event_state.evnt.target).hasClass('resize-handle-sw')) < width = event_state.container_width - (mouse.x - event_state.container_left); height = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; >else if($(event_state.evnt.target).hasClass('resize-handle-nw')) < width = event_state.container_width - (mouse.x - event_state.container_left); height = event_state.container_height - (mouse.y - event_state.container_top); left = mouse.x; top = mouse.y; if(constrain || e.shiftKey)< top = mouse.y - ((width / orig_src.width * orig_src.height) - height); >> else if($(event_state.evnt.target).hasClass('resize-handle-ne')) < width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain || e.shiftKey)< top = mouse.y - ((width / orig_src.width * orig_src.height) - height); >> // Сохраняем пропорции при нажатой клавише shift if(constrain || e.shiftKey) < height = width / orig_src.width * orig_src.height; >if(width > min_width && height > min_height && width < max_width && height < max_height)< // Чтобы улучшить производительность, стоит ограничить количество использований resizeImage() resizeImage(width, height); // Без этого Firefox не сможет пересчитать размеры изображения, пока ручки не перестанут передвигаться $container.offset(); > >

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

Перемещение изображения JavaScript

Из-за того, что размер фото меняется с любого угла, картинка может непроизвольно переместиться. Нужно позволить пользователям поместить картинку обратно в центр «рамки». Добавим в init() еще один слушатель событий, похожий на тот, который был создан ранее в этой статье.

init = function()< //. $container.on('mousedown', 'img', startMoving); >

Установим функции startMoving() и endMoving(), которые ничем не отличаются от startResize() и endResize().

startMoving = function(e)< e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on('mousemove', moving); $(document).on('mouseup', endMoving); >; endMoving = function(e)< e.preventDefault(); $(document).off('mouseup', endMoving); $(document).off('mousemove', moving); >;

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

moving = function(e)< var mouse=<>; e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(< 'left': mouse.x - ( event_state.mouse_x - event_state.container_left), 'top': mouse.y - ( event_state.mouse_y - event_state.container_top) >); >;

Обрезка изображения JavaScript

Научившись изменять размер фото, можно добавить и функцию его обрезки. Однако не будем давать пользователям свободу в выборе формы и размера обрезанного изображения. Вместо этого нужно создать «рамку», в которой задаются точные размеры, а пользователь должен поместить нужную часть картинки в эту «рамку».

Пропишем следующий HTML:

 
 
 Crop

Очень важны атрибуты блока overlay: положение, высота и ширина. Они нужны для того, чтобы понять, какая часть картинки обрезается. Необходимо также учесть, что «рамка» должна быть заметна на фоне любого цвета. Для этого нужно создать полупрозрачную обводку вокруг «рамки».

.overlay < position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; z-index: 999; width: 200px; height: 200px; border: solid 2px rgba(222,60,80,.9); box-sizing: content-box; pointer-events: none; >.overlay:after, .overlay:before < content: ''; position: absolute; display: block; width: 204px; height: 40px; border-left: dashed 2px rgba(222,60,80,.9); border-right: dashed 2px rgba(222,60,80,.9); >.overlay:before < top: 0; margin-left: -2px; margin-top: -40px; >.overlay:after < bottom: 0; margin-left: -2px; margin-bottom: -40px; >.overlay-inner:after, .overlay-inner:before < content: ''; position: absolute; display: block; width: 40px; height: 204px; border-top: dashed 2px rgba(222,60,80,.9); border-bottom: dashed 2px rgba(222,60,80,.9); >.overlay-inner:before < left: 0; margin-left: -40px; margin-top: -2px; >.overlay-inner:after < right: 0; margin-right: -40px; margin-top: -2px; >.btn-crop

Нужно обновить JavaScript следующим прослушивателем событий:

init = function()< //. $('.js-crop').on('click', crop); >; crop = function()< var crop_canvas, left = $('.overlay').offset().left - $container.offset().left, top = $('.overlay').offset().top - $container.offset().top, width = $('.overlay').width(), height = $('.overlay').height(); crop_canvas = document.createElement('canvas'); crop_canvas.width = width; crop_canvas.height = height; crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL("image/png")); >

Функция crop() схожа с resizeImage(), только в этом случае мы не передаем данные о ширине и высоте: она сама их «возьмет» из элемента overlay.

Для проведения операции обрезки нужно учесть 9 параметров: первый – исходное изображение; следующие 4 показывают, какая часть картинки используется; последние 4 параметра указывают, в какой части холста и в каком масштабе нужно поместить готовое фото.

Добавляем распознание касаний JavaScript

Созданный инструмент умеет получать события от мыши. Теперь адаптируем ее для сенсорных устройств.

Mousedown и mouseup соответствуют touchstart и touchend (они выполняют те же функции, только получают данные о касаниях, а не о перемещении курсора), а mousemove – touchmove.

Заменим все mousedown, mouseup и mousemove на перечисленные выше аналоги.

// В init(). $container.on('mousedown touchstart', '.resize-handle', startResize); $container.on('mousedown touchstart', 'img', startMoving); // В startResize() . $(document).on('mousemove touchmove', moving); $(document).on('mouseup touchend', endMoving); // В endResize(). $(document).off('mouseup touchend', endMoving); $(document).off('mousemove touchmove', moving); // В startMoving(). $(document).on('mousemove touchmove', moving); $(document).on('mouseup touchend', endMoving); // В endMoving(). $(document).off('mouseup touchend', endMoving); $(document).off('mousemove touchmove', moving);

Так как инструмент позволяет изменять размер изображения, можно предположить, что некоторые пользователи попытаются сделать это с помощью привычного жеста («щипка») двумя пальцами. При создании приложений для сенсорных устройств очень помогает библиотека Hammer . Так как нам нужно только распознать масштабирование двумя пальцами, добавление этой библиотеки будет чересчур. Сейчас вы узнаете, как распознать жест без библиотек.

В функции saveEventState() мы храним исходную информацию о касании. Теперь она пригодится.

Сначала определим, содержит ли событие 2-ва прикосновения, и измерим расстояние от одного до другого. Это наш «исходник». Затем программа должна постоянно отслеживать, как меняется расстояние между этими касаниями. Обновим код функции moving():

moving = function(e)< var mouse=<>, touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop(); $container.offset(< 'left': mouse.x - (event_state.mouse_x - event_state.container_left), 'top': mouse.y - (event_state.mouse_y - event_state.container_top) >); // Следим за жестом масштабирования во время движения if(event_state.touches && event_state.touches.length > 1 && touches.length > 1) < var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches[0].clientX - event_state.touches[1].clientX; a = a * a; var b = event_state.touches[0].clientY - event_state.touches[1].clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches[0].clientX - touches[1].clientX; a = a * a; b = e.originalEvent.touches[0].clientY - touches[1].clientY; b = b * b; var dist2 = Math.sqrt(a + b); var ratio = dist2 /dist1; width = width * ratio; height = height * ratio; // Чтобы улучшить производительность, стоит ограничить количество использований resizeImage() resizeImage(width, height); >>;

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

Во время тестирования Chrome не дал браузеру отреагировать на масштабирование двумя пальцами так, как по умолчанию (этот жест используется для увеличения или уменьшения веб-страницы).

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

Как изменить размер картинки в html css

Задать размер картинки в html: Как правильно изменять размер изображений с помощью CSS/HTML? — Хабр Q&A

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

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

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега значение атрибута width устанавливается равным 100% (пример 1). Изображение в таком случае растягивается на всю ширину контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом неизбежно появятся искажения, поэтому подобный метод применяется достаточно редко и далеко не для всех картинок.

Пример 1. Ширина изображения

В данном примере ширина (width) рисунка задана как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

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

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде 1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно, а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную площадь.

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

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон образуют цельное изображение. В примере 2 приведено создание подобного блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

В данном примере высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение на таком фоне применяют тонирование рисунка (сепия, как это еще называется) или градиентный переход, как показано на рис. 4.

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого перехода от изображения к фону может не получиться, поскольку будет виден заметный стык. В этом случае лучше применять формат GIF или PNG.

При использовании одноцветного фона код незначительно поменяется (пример 3). Повторять фон теперь не нужно, поэтому свойство background будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

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

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения этой цели применяют следующий алгоритм. Вначале подготавливается изображение достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как фоновый рисунок для определенного слоя.

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении монитора, кроме, разве что, самого фантастического и редко используемого. Если такой рисунок просто добавить через тег , то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем швам макет страницы. Использование изображения как фона и обеспечивает отсутствие ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета, но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же свойство background, в качестве его значения задается путь к фоновой картинке и ее параметры. Так, значение right top говорит, что правый край изображения будет фиксироваться, а при изменении ширины окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:

• рисунок должен быть таким, чтобы при обрезании части изображения он не терял свою информативность;
• большая ширина предполагает и большой объем графического файла, который следует ограничить за счет уменьшения числа цветов, снижения качества картинки или другими параметрами.

Резюме

Способ добавления изображения на всю ширину макета веб-страницы зависит от применяемого метода верстки. Если используется макет фиксированной ширины, то общая его ширина известна заранее и рисунок по горизонтали следует ограничить этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом, что получается слитная единая картинка. Также применяются широкие фоновые изображения, которые не приводят к появлению горизонтальной полосы прокрутки, но при этом занимают всю отведенную им ширину, независимо от размера окна браузера.

Как изменить размер фоновой картинки через CSS3

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

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

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Масштабирование нескольких фонов

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

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Просмотр демонстрационной страницы с background-size.

Есть ли в HTML тег «size»?

Чтобы сайт выглядел согласно вашему дизайну, придется менять размер текста или размер изображений HTML. Чтобы сделать это, вы, вероятно, будете искать тег «size», но вскоре поймете, что в гипертексте такого нет.

Чтобы задать размеры шрифтов, изображений и других элементов следует использовать CSS. Любые визуальные изменения текста или других элементов должны выполняться с помощью каскадных таблиц стилей! HTML предназначен только для структуры.

Единственный способ изменять размеры шрифта — это устаревший тег , который имеет атрибут size. Имейте в виду, что этот тег отсутствует в текущих версиях HTML, и в будущем может перестать поддерживаться браузерами! Изменять размеры элементов и стили сайта следует с помощью CSS.

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

Чтобы получить абзац со шрифтом 12pt, нужно задать ему свойство font-size:

Это изменит размер заголовков третьего уровня до 24 пикселей. Можно добавить это свойство к внешней таблице стилей, и это значение будут использовать все заголовки < h4>.

Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила:

Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным (о чем говорит hex-код #000), а также установит начертание в значение «normal». По умолчанию, браузеры отображают заголовки h2—h6 в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.

Не всегда удается задать нужный размер изображений, так как браузер может делать это автоматически. Браузеры не всегда хорошо справляются с этой задачей, отчего сильно страдает качество отображения картинок. Поэтому перед тем, как задать размер изображения в HTML, лучше использовать графические редакторы. А затем прописывать их фактический размер в разметке веб-страницы.

В отличие от шрифтов для определения размера изображений можно использовать как HTML, так и CSS. Используя HTML, размер картинок можно задать только в пикселях. В CSS размеры можно задавать в других величина. Например, в дюймах, сантиметрах и процентах. Если вы хотите, чтобы сайт был с адаптивными картинками, лучше применять процентное значение.

Чтобы задать изображению размер в HTML, используйте тег с атрибутами height и width.

Например, изображение должно иметь размер 400 на 400 пикселей:

Чтобы задать размеры изображения в CSS, используйте свойства height и width. Вот то же изображение, для определения размера которого используется CSS:

Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения — пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML изображениями по размеру окна, нужно применять CSS-свойства height и width.

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

Данная публикация представляет собой перевод статьи «Does an HTML Size Tag Exist?» , подготовленной дружной командой проекта Интернет-технологии.ру

Картинка по размеру блока. CSS свойство object-fit

Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit. Оно может иметь такие значения:

object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)

object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.

object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.

object-fit: none — картинка отображается в своём реальном масштабе

object-fit: scale-down — соответствует либо contain либо none. Из этих вариантов выбирает тот, который меньше.

object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение

object-fit: inherit — значение принимается от родительского элемента

Результат использования свойства object-fit выглядит так:

Каждое значение свойства object-fit используется для своих целей:

• cover применяется чтобы картинка заполнила весь блок и в нём не было пустых пространств. Например, это нужно когда на странице несколько картинок и они должны отображаться в одном стиле. У всех изображений одинаковая форма и размеры. Но нужно учитывать, что часть картинки может быть не видна.
• contain полезно, если нужно обязательно показать всю картинку. Но форма блока отличается от формы изображения. Часть блока остаётся пустой. Зато изображение растягивается максимально, насколько позволяет блок, чтобы пользователь мог его рассмотреть.
• none нужна для специфических ситуаций, когда нельзя менять реальный размер картинки, но для неё выделено конкретное пространство на странице.
• scale-down используется для тех же целей, что contain. Но мы учитываем, что изображение может оказаться меньше блока. contain в этом случае растянет картинку по размеру блока и изображение получится размытым. А вот scale-down не будет увеличивать изображение. И получится маленькая картинка в большом блоке.

Чтобы свойство object-fit работало, изображению нужно указать размеры. Когда картинка в блоке, указываем размеры: 100%. На самом деле, картинка не обязательно должна быть внутри блока. Просто чаще всего свойство используется именно когда нужно растянуть картинку по размеру блока. Но работа object-fit зависит от размеров изображения а не от внешнего блока.

Создадим блок, добавим в неё картинку и растянем её по ширине блока:

По умолчанию изображение позиционируется по центру. Свойство object-position позволяет установить позиционирование изображения и сдвинуть его внутри блока. В значении указывается горизонтальное позиционирование и через пробел вертикальное позиционирование. Горизонтальное бывает: left, center, right, а вертикальное бывает: top, center, bottom. Также можно указать смещения в единицах измерения CSS. Тогда они отсчитываются от левого верхнего угла картинки.

масштабируем фон — учебник CSS

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

…то высота фоновой картинки будет вычисляться автоматически.

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

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

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

CSS работа с изображениями

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

Использование тега img

Тег img — стандартный способ добавления изображений на сайт.

Тег снабжен атрибутами:

Для масштабирования используются стандартные css свойства: width и height.

Пример:

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

Тег img хорошо подходит для отображения статичного контента, но когда дело доходит для вывода динамики удобнее выводить элементы с помощью фонового изображения. В качестве контейнера можно использовать любой элемент вроде div, span, a. Далее в дело вступают css свойства background и background-size. Background указывает путь к изображению и задает базовые правила его вывода, а background-size описывает способ отображения фона. Выше показанный пример можно отобразить подобным способом (красная рамка для выделения контейнера).

Пример:

Свойство center выравнивает фон по горизонтали и по вертикали, а no-repeat запрещает повторение изображения.

Но зачастую изображение отличается по размеру и пропорциям от контейнера, а его необходимо растянуть по всей его площади. Для этого используют background-size с параметром cover.

Пример:

Со свойством background-size: cover:

Если необходимо чтобы изображение занимало максимальную площадь контейнера, но при это не обрезалось используется background-size с параметром contain.

Пример:

Со свойством background-size: contain:

Также с помощью background-size можно задавать конкретный размер изображения.

Пример:

Еще можно добавить фоновый цвет контейнеру.

Пример:

Как изменить размер изображения с помощью HTML

Обновлено: 06.03.2020, Computer Hope

Следующие шаги помогут пользователям сохранить исходный размер изображения (в КБ или МБ) и изменить размер изображения с помощью HTML. Хотя это возможно, мы все же рекомендуем вам изменить размер изображения с помощью редактора изображений, чтобы уменьшить размер файла и сократить время загрузки изображения.

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

Изменение размера с помощью HTML

Укажите ширину и высоту в HTML-теге IMG SRC, как показано в примере ниже.

Нормальный вид изображения

Использование приведенного выше кода для изменения размера изображения

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

Изменение размера с помощью CSS

Вы также можете изменить размер изображения с помощью CSS, как показано в примерах ниже.

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

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

Чтобы применить CSS к HTML-тегу IMG SRC, необходимо сделать следующее.

Использование CSS приводит к более коротким тегам IMG SRC, так как вам нужно только указать имя класса в теге, чтобы активировать код CSS для этого изображения.

Как указать размер изображения в HTML5

1. Веб-дизайн и разработка
2. HTML5
3. Как указать размер изображения в HTML5

Эд Титтель, Крис Минник

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

Используйте атрибуты высоты и ширины с элементом , чтобы браузер знал, насколько высокое и широкое изображение (по умолчанию единица измерения — пиксели или пиксели):

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

Если вы сообщаете браузеру, насколько велико изображение, браузер может зарезервировать для него место на отображении страницы. Это ускоряет процесс добавления графики и прочего на веб-страницу.

Вы можете проверить ширину и высоту изображения в пикселях в любой программе редактирования изображений или в средствах просмотра изображений, встроенных в Windows и Mac OS. (Вы можете просто просмотреть свойства изображения в Windows или Mac OS, чтобы увидеть его высоту и ширину.)

Еще одно хорошее использование атрибутов высоты и ширины — создание цветных линий на странице с помощью небольшого цветного квадрата. Например, эта разметка добавляет на веб-страницу синюю рамку размером 10 x 10 пикселей:

Используйте атрибуты высоты и ширины элемента , чтобы установить высоту и ширину изображения. Таким образом, вы используете эти значения для создания синего поля размером 10 x 10 пикселей в окне браузера (показано вверху рисунка), даже если исходное изображение имеет размер 600 x 600 пикселей.

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

На этом рисунке также показаны блоки размером 20 x 20 и 50 x 50 пикселей. Вот изменения в значениях высоты и ширины в разметке для создания двух других полей:

Используя эту технику, вы можете превратить отдельное изображение, такое как синий прямоугольник (размером всего 2,39 КБ), в множество линий и даже прямоугольников:

Этот метод может гарантировать, что все разделители и другие элементы границы на вашей странице будут иметь один и тот же цвет, поскольку все они основаны на одной и той же графике.

Если вы решили, что хотите изменить все синие линии на зеленые, вы просто измените изображение. Каждая созданная вами линия меняет цвет.

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

Браузер плохо определяет размер изображений, и вы получаете искаженное изображение. Этот рисунок показывает, насколько плохо браузер обрабатывает увеличение изображения трубы, когда разметка умножает высоту изображения на четыре и его ширину на два (обратите внимание на сходство с флюгельгорном!):

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

Об авторе книги

Эд Титтель — ветеран технологической индустрии с 30-летним стажем, на его счету более 140 книг по вычислительной технике, включая бестселлер HTML для чайников .

Крис Минник запускает веб-службы Minnick. Он преподает, говорит и консультирует по темам, связанным с Интернетом, и внес свой вклад в создание множества книг, в том числе WebKit For Dummies .

Как изменить размер изображений в HTML

Чтобы изменить размер изображения в HTML, используйте атрибуты width и height тега . Вы также можете использовать различные свойства CSS для изменения размера изображений.

Вот изображение в исходном размере:

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

Ниже показано то же изображение после изменения его размера с помощью HTML (с использованием атрибутов width и height тега ):

Размер изображения изменен с помощью атрибутов width и height тега img.

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

Изменение размера с помощью CSS

Обычно лучше использовать CSS для изменения размера изображений в HTML. Это можно сделать с помощью свойств высота и ширина .

Размер изображения изменен с помощью свойств CSS «width» и «height».

Рекомендации по изменению размера

Изменение размера изображений с помощью HTML / CSS следует выполнять только при необходимости.Обычно лучше использовать изображение правильного размера, чем изменять его размер с помощью HTML. Это связано с тем, что изменение его размера с помощью HTML не уменьшает размер файла — полный файл все равно должен быть загружен, прежде чем его можно будет изменить.

Поэтому, если возможно, сначала измените размер изображения до правильных размеров, используя редактор изображений (например, GIMP), прежде чем загружать его на свой веб-сайт / блог.

Динамическое изменение размера изображения

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

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

Размер изображения изменяется динамически с помощью свойства CSS ‘max-width’.

Путем пропуска любых объявлений ширины / высоты и только с использованием max-width: 100%; , изображение будет отображаться в размере 100% от размера его контейнера, но не больше.Если изображение больше, чем его контейнер, изображение сократится, чтобы уместиться. Однако, если изображение меньше, чем его контейнер, оно будет отображаться в своем истинном размере (то есть оно не будет увеличиваться в размере, чтобы соответствовать контейнеру).

Этот метод может быть удобен при адаптивном проектировании для отображения изображения / веб-страницы на устройствах разного размера.

Помещение стилей во внешнюю таблицу стилей

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

Если вы поместите код фонового изображения во внешнюю таблицу стилей, вот фрагмент того, как это может выглядеть:

Вот фрагмент того, как может выглядеть HTML-код:

… … … … …

Добавление приведенной выше внешней таблицы стилей устанавливает для всех элементов максимальную ширину 100%.

В этом примере также устанавливается класс для миниатюр (называемый thumbnail ), который устанавливает их ширину и высоту. Теперь любой элемент , использующий этот класс, будет автоматически отображаться с таким размером.

Как изменить размер картинки в html css

Тег (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG, PNG, WebP.

 Этот шрифт будет размером в 20px 

p  font-size: 20px; >