Как сделать изменить размер картинки

Добавлено: 15.08.2017, 19:06 / Просмотров: 42174

Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 10.6 показано изображение, которое имеет размеры 100х111 пикселов.

Рис. 10.5

Рис. 10.6. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в примере 10.4.

Пример 10.4. Размеры рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Размеры изображения</title> </head> <body> <p><img src="images/figure.jpg" width="100" height="111" alt="Винни-Пух"></p> </body> </html>

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

Рис. 10.7

Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась

Рис. 10.8

Рис. 10.8. Картинка загружена, текст переформатирован

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

На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.

Рис. 10.9

Рис. 10.9. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в примере 10.5.

Пример 10.5. Изменение размера рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Увеличение размеров изображения</title> </head> <body> <p><img src="images/figure.jpg" width="200" height="222" alt="Винни-Пух"></p> </body> </html>

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.10 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 10.10

Рис. 10.10. Увеличенное изображение

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


Источник: http://htmlbook.ru/samhtml/izobrazheniya/izmenenie-razmerov-risunka


Закрыть ... [X]

Как изменить размер изображения. Microsoft Paint Периферия своими руками


Как сделать изменить размер картинки Как изменить размер картинки. ТВОЙ ПОМОЩНИК - ИНТЕРНЕТ
Как сделать изменить размер картинки Уменьшить и увеличить фото онлайн
Как сделать изменить размер картинки Изменить или уменьшить размер фото онлайн бесплатно на
Как сделать изменить размер картинки 2018 - отдых в Таиланде, экскурсии
Как сделать изменить размер картинки MAKE -SELF World of creative ideas
Как сделать изменить размер картинки Oткатные ворота: цена от 22.000 рублей!
Как сделать изменить размер картинки Pецепт гамбургера из макдональдс McDonalds - меню
Как сделать изменить размер картинки Артериальное давление - лечение народными
Как сделать изменить размер картинки Бесплатная ставка от БК Марафон
Вся правда о электромонтажных работах в деревянном доме в Как восстановить страницу в одноклассниках - восстановление Как сделать бутоньерку из атласных лент своими руками? Как сделать компрессор с ресивером своими руками. : Техники и Как сделать подарок маме, бабушке и сестре своими Как сделать ярлыки меньше? - elHow Мастер-классы: Скрапбукинг Новогодние елки своими руками фото. Новогодние елки своими