JavaScript динамически изменяет размеры изображений

Распространенной проблемой при обновлении статей на вашем веб-сайте является то, что иллюстрации статей слишком широки, что приводит к искажению всей веб-страницы. Было бы слишком хлопотно масштабировать каждую иллюстрацию перед ее вставкой.

Я столкнулся с подобными вещами в статье, которую написал некоторое время назад. Позже я использовал свойства CSS overflow и max-width, чтобы временно решить проблему деформации страницы. Преимущество этого метода в том, что он прост, а недостаток в том, что он уничтожит эффект некоторых деталей.

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

Если вы ограничиваете максимальную ширину иллюстраций статей с помощью атрибута max-width, вам необходимо учитывать совместимость каждого браузера. IE6 не поддерживает этот атрибут.По моему мнению, хотя некоторые браузеры поддерживают этот атрибут, изображения не масштабируются пропорционально (кажется, Safari и Opera, точно не помню, если это сделать, это будет вредно). к пользователям этих браузеров Очень несправедливо.

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

Есть два решения. Поскольку тема, которую я использую, загружена с библиотекой jQuery, ее можно реализовать с помощью следующего кода:

$ ( документ ) готов ( функция ( ) { .
 $ ( '.post img' ) каждый ( функция ( ) {.
 var maxWidth = 100 // Максимальная ширина изображения
 var maxHeight = 100 // Максимальная высота изображения
 var коэффициент = 0 // коэффициент масштабирования
 var width = $ ( this ) ширина ( ) // Фактическая ширина изображения ;
 var height = $ ( this ) . height ( ) // Фактическая высота изображения ;

 // Проверяем, является ли изображение очень широким
 если ( ширина > maxWidth ) {
 Ratio = maxWidth / Width // Вычисляем коэффициент масштабирования ;
 $ ( this ) .css ( "width" , maxWidth ) // Устанавливаем фактическую ширину дисплея ;
 высота = высота * соотношение // Вычисляем высоту после равного масштабирования
 $ ( this ) .css ( "height" , высота * соотношение ) // Устанавливаем высоту после пропорционального масштабирования;
 }

 // Проверяем, является ли изображение очень высоким
 если ( высота > maxHeight ) {
 Ratio = maxHeight / height // Вычисляем коэффициент масштабирования
 $ ( this ) .css ( "height" , maxHeight ) // Устанавливаем фактическую высоту дисплея ;
 ширина = ширина * соотношение // Вычисляем высоту после равного масштабирования
 $ ( this ) .css ( "width" , ширина * соотношение ) // Устанавливаем высоту после пропорционального масштабирования;
 }
 } ) ;
 } ) ;

Если вы не хотите загружать библиотеку jQuery, вы можете использовать следующий код:

 функция ResizeImage ( изображение , максимальная ширина иллюстрации , максимальная высота иллюстрации )
 {
 if ( image. className == "Миниатюра" )
 {
 ш = изображение.ширина ;
 h = изображение.высота ;

 если ( ш == 0 || час == 0 )
 {
 изображение.ширина = максимальная ширина ;
 изображение.высота = максимальная высота ;
 }
 иначе, если ( ш > ч )
 {
 if ( w > maxwidth ) image.width = maxwidth ;
 }
 еще
 {
 если ( h > maxheight ) image height = maxheight ;
 }

 image.className = "ScaledThumbnail" ;
 }
 }

Использование чистого JavaScript немного сложнее, так как вам нужно вручную добавить к изображению class="Thumbnail", но конечный эффект тот же.

Исходный текст: Динамическая настройка размера изображения.

Спасибо, Боло, за твой вклад