Содержание
Приведенные ниже шаги предназначены для пользователей, которые хотят сохранить изображение с исходным размером файла (в КБ или МБ).
и измените размер изображения на веб-странице. Хотя это возможно, мы все же предлагаем изменить размер изображения с помощью графического редактора, чтобы уменьшить размер файла и сократить время загрузки изображения. При изменении размера изображения с помощью шагов, приведенных ниже, оно все равно должно загрузить большее изображение, даже если оно выглядит меньше в браузере.
Изменить размер с HTML
Укажите ширину и высоту в своем HTML-теге IMG SRC, как показано в примере ниже.
Как изображение выглядит нормально
Используя приведенный выше код для изменения размера изображения
Заметка
При изменении размера изображения вам необходимо сохранить соотношение сторон. В противном случае изображение может стать искаженным и потерять качество изображения.
Изменить размер с помощью CSS
Вы также можете изменить размер изображения с помощью CSS, как показано в примерах ниже.
img.resize {
ширина: 200px;
высота: 40px;
}img.resize {
макс-ширина: 50%;
макс высота: 50%;
}В первом примере фактический размер в пикселях указывается для ширины и высоты. Использование этой опции ограничивает изображения, которые могут использовать этот CSS. Поскольку он определяет ширину и высоту, этот метод может привести к искажению изображений, если у него нет соотношения сторон 5: 1.
Во втором примере указывается процент от размера исходного изображения, как ширины, так и высоты, а не размера в пикселях. Использование этой опции позволяет использовать более широкий диапазон изображений. Поскольку указан процент ширины и высоты изображения, браузер может изменить размер практически любого изображения и сохранить его соотношение сторон.
Чтобы применить CSS к HTML-тегу IMG SRC, вы должны сделать следующее.
Использование CSS приводит к более коротким тегам IMG SRC, поскольку ширина и высота обрабатываются с помощью CSS, и вам нужно только указать имя класса в теге, чтобы активировать код CSS для этого изображения.
