Изменение размера картинки (ширина и высота)
Если для картинки в HTML коде не указаны размеры, то браузер будет отображать её в естественном размере, но он не сможет определить размер до тех пор, пока картинка загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width (ширина картинки) и height (высота картинки) тега <img>, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.
Если атрибуты width и height содержат значения не соответствующие натуральному размеру картинки, браузер будет масштабировать картинку под эти размеры.
width и height должны быть указаны натуральные размеры, а для увеличения или уменьшения картинок лучше воспользоваться графическим редактором.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<p>
<img src="flower.png">
<img src="flower.png">
<img src="flower.png">
</p>
<p>
Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и
height. Но при очень большом увеличении качество картинки может стать хуже.
</p>
</body>
</html>
Попробовать »
Если вы решили изменить размер картинки с помощью атрибутов width и height, то следует соблюдать пропорции между шириной и высотой картинки.
Изменение пропорций размера картинки приведет к её деформации.
Примечание: чтобы не вычислять пропорции для высоты и ширины картинки, можно просто задать только один из атрибутов или width или height, в зависимости от того, какой из размеров в данной ситуации вам важнее ширина или высота картинки. В случае указания только одного атрибута, второй размер (ширину или высоту) браузер подберёт автоматически. Вы можете проверить это на предыдущем примере, стерев для картинки в коде один из атрибутов, задающих размер.
С этой темой смотрят:
- HTML картинки, форматы изображений
- Как вставить картинку в html
- Как сделать картинку ссылкой
- HTML тег <img>
Масштабирование картинок | WebReference
Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере.
Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.
Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.
Использование атрибутов
Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.
Пример 1. Размеры в пикселях
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> </head> <body> <img src=»image/redcat.jpg» alt=»Размеры не заданы»> <img src=»image/redcat.jpg» alt=»Задана ширина»> <img src=»image/redcat.jpg» alt=»Задана ширина и высота»> </body> </html> В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде.
Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).Рис. 1. Размеры фотографии
Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.
Пример 2. Размеры в процентах
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> figure { width: 27%; /* Ширина */ float: left; /* Выстраиваем элементы по горизонтали */ margin: 0 0 0 3.5%; /* Отступ слева */ background: #f0f0f0; /* Цвет фона */ border-radius: 5px; /* Радиус скругления */ padding: 2%; /* Поля */ } figure:first-child { margin-left: 0; /* Убираем отступ для первого элемента */ } </style> </head> <body> <figure> <img src=»image/redcat.
В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.
Рис. 2. Масштабирование фотографий
Масштабирование через стили
Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height.
Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента <figure>.
Пример 3. Размеры через стили
figure img {
width: 100%; /* Ширина в процентах */
}Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width, то стили имеют приоритет выше.
Интерполяция
Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.
Похожее происходит и при уменьшении изображения, только браузеру уже приходится не добавлять, а выбрасывать часть пикселей.
Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering. К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.
Пример 4. Изменение алгоритма интерполяции
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> img { border: 1px solid #ccc; } .edge { image-rendering: -moz-crisp-edges; /* Firefox */ -ms-interpolation-mode: nearest-neighbor; /* IE */ image-rendering: crisp-edges; /* Стандартное свойство */ } </style> </head> <body> <img src=»image/russia.
Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.
Рис. 3. Вид картинок после увеличения масштаба
Вписывание картинки в область
Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).
Пример 5. Использование overflow
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> figure { width: 100%; /* Ширина области */ height: 400px; /* Высота области */ margin: 0; /* Обнуляем отступы */ overflow: hidden; /* Прячем всё за пределами */ min-width: 600px; /* Минимальная ширина */ } figure img { width: 100%; /* Ширина изображений */ margin: -10% 0 0 0; /* Сдвигаем вверх */ } </style> </head> <body> <figure> <img src=»image/redcat.
jpg» alt=»Рыжая кошка»>
</figure>
</body>
</html>Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.
Рис. 4. Фотография внутри области заданных размеров
Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover, оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.
Пример 6. Использование object-fit
figure {
width: 100%; /* Ширина области */
height: 400px; /* Высота области */
margin: 0; /* Обнуляем отступы */
}
figure img {
width: 100%; /* Ширина изображений */
height: 100%; /* Высота изображении */
object-fit: cover; /* Вписываем фотографию в область */
}См.
также- <img>
- <picture>
- object-fit
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Подрисуночная подпись
- Форматы графических файлов
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Стандартные размеры фотопечати [ДИАГРАММА]
Войти в бесплатную пробную версию
Пытаетесь преобразовать пиксели цифрового изображения в холодные, твердые, пригодные для печати дюймов? См. приведенные ниже таблицы преобразования и ознакомьтесь с инструментами Resize , Crop и Smart Resize , которые позволяют быстро и легко создавать стандартные размеры фотопечати. Начните редактирование фотографий бесплатно уже сегодня!
Начать бесплатную пробную версию
Популярные размеры фотографий
Получите правильные пропорции печати с помощью PicMonkey для создания самых популярных стандартных размеров фотографий в дюймах:
3×5
4×6
5×7
8×8
8×10
8.
5×119×16
11×14
11×16
5×11Чтобы узнать больше о стандартных размерах фотографий для печати, см.:
Как изменить размер изображения профессионально
Стандартные размеры фотопечати: таблица пикселей в дюймах
Чтобы преобразовать размер изображения в дюймах в пиксели, просто умножьте количество дюймов в вашем предполагаемом размере печати на 300, чтобы найти размеры в пикселях (при условии, что ваш принтер настроен на стандартные 300 точек на дюйм). Например, 3 x 5 дюймов становится 900 x 1500 пикселей . Если вы используете метрическую систему и хотите преобразовать сантиметры в пиксели, умножьте количество сантиметров на 118,11.
| Inches | Pixels |
|---|---|
| 3 x 5 | 900 x 1500 |
| 4 x 6 | 1200 x 1800 |
| 5 x 7 | 1500 x 2100 |
| 8 х 8 | 2400 х 2400 |
| 8 x 10 | 2400 x 3000 |
8. 5 x 11 | 2550 x 3300 |
| 9 x 16 | 2700 x 4800 |
| 11 x 14 | 3300 x 4200 |
| 11 x 16 | 3300 x 4800 |
Изменение размера изображения в PicMonkey
Перейдите на вкладку «Редактирование» (верхний значок в синем столбце слева).
Выберите инструмент «Изменить размер».
Введите размеры в пикселях.
Щелкните Применить.
Щелкните значок цепочки, чтобы сохранить пропорции, и вам нужно будет ввести размеры только в одном из полей — PicMonkey вычислит все остальное.
Попробуйте изменить размер фотографии
Обрезать изображение в PicMonkey
Откройте вкладку «Редактирование».
Выберите «Кадрирование холста».
Выберите предустановленный размер или введите собственные размеры.
Нажмите Применить.
Обрезка
Экономьте время с помощью Smart Resize
Создавайте несколько версий одного дизайна за считанные секунды. Быстро изменяйте размер публикации/объявления/баннера, чтобы он поместился в Instagram, Facebook, YouTube, Pinterest — везде, где вы хотите рекламировать или делиться своим брендом. Идеально подходит для цифровых маркетологов!
Узнать больше
Стандартные форматы фотопечати: преобразование ISO в пиксели
В этой таблице приведены международные стандартные форматы печати. A0 — это один квадратный метр, и каждый последующий размер в два раза меньше предыдущего. Стандартные размеры печати ISO используются реже в США и Канаде, хотя некоторые размеры являются общими для определенных вещей.
Например, А7 — это размер карты для заметок.
| ISO | Pixels |
|---|---|
| A0 | 9933 x 14043 |
| A1 | 7016 x 9933 |
| A2 | 4961 x 7016 |
| A3 | 3508 x 4961 |
| A4 | 2480 x 3508 |
| A5 | 1748 x 2480 |
| A6 | 1240 x 1748 |
| A7 | 874 x 1240 |
Требования к размеру и разрешению изображения
В этой таблице показаны идеальные размеры и разрешение изображения для различных онлайн- и экранных приложений, а также для печати фотографий.
| Приложение | Идеальный размер изображения (в пикселях) | Разрешение (в пикселях/дюймах) |
| Для мобильных телефонов и портативных устройств с маленькими экранами: | 320 x 240 пикселей | 72 точки на дюйм
|
| Для электронной почты, сайтов обмена в Интернете и просмотра на стандартных мониторах компьютеров: | 1024 x 768 пикселей | 72 точки на дюйм
|
| Просмотр в полноэкранном режиме на ЖК-мониторах с соотношением сторон 5:4 | 1280 x 1024 пикселей | 72 точки на дюйм
|
| Просмотр на телевизорах стандартной четкости с соотношением сторон 4:3: | 720 x 576 пикселей | 72 точки на дюйм
|
| Просмотр на широкоэкранных телевизорах стандартной четкости: | 1280 x 720 пикселей | 72 точки на дюйм
|
| Просмотр на телевизорах высокой четкости: | 1920 x 1080 пикселей | 72 точки на дюйм
|
Вам нужно гораздо более высокое разрешение, когда вы хотите распечатать свои цифровые фотографии.
Для фотографий, которые будут тщательно изучены, т. е. размером до A4, рекомендуемое выходное разрешение составляет 300 пикселей на дюйм. Для больших отпечатков, которые будут просматриваться с большего расстояния, разрешение печати может быть несколько ниже. В таблице ниже размер вывода, необходимый для высококачественной фотопечати, соотносится с числом мегапикселей сенсора.
| Разрешение сенсора (мегапиксели) | Типичное разрешение изображения (в пикселях) | Максимальный размер печати | Разрешение печати | Максимальный размер вывода |
| 2,16 | 1800 х 1200 | 6 х 4 дюйма | 300 т/д | Печать снимков |
| 3,9 | 2272 х 1704 | 7,6 x 5,7 дюйма | 300 т/д | Распечатки снимка Jumbo |
| 5,0 | 2592 х 1944 | 8,6 x 6,5 дюйма | 300 т/д | Увеличение 8 x 6 дюймов |
7. 1 | 3072 x 2304 | 10,2 x 7,7 дюйма | 300 т/д | Отпечатки формата A4 |
| 8,0 | 3264 x 2448 | 13,6 x 10,2 дюйма | 240 точек на дюйм | Отпечатки формата A4 |
| 10,0 | 3648 x 2736 | 18,2 x 13,7 дюйма | 200 т/д | Отпечатки формата A3 |
| 12.1 | 4000 х 3000 | 20 x 15 дюймов | 200 т/д | Отпечатки формата A3+ |
| 14,7 | 4416 х 3312 | 22,1 x 16,6 дюйма | 200 т/д | Отпечатки формата A2 |
| 21,0 | 5616 х 3744 | 31,2 x 20,8 дюйма | 180 точек на дюйм | Отпечатки формата A1 |
Это выдержка из карманного руководства по пост-захвату .