Выравнивание картинки по высоте и ширине

14.03.2016, 11:08. Показов 546. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Здравствуйте!

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function imagePlace(theImage){
   // Соотношение высоты и ширины
   var ratio=theImage.height/theImage.width;
   // если высота больше или квадрат, делаем ее равной высоте вьюпорта
  if (ratio>=1){
        theImage.height=document.documentElement.clientHeight;
        // если ширина больше, она равна ширине вьюпорта
  }else{theImage.width=document.documentElement.clientWidth;
    }
   // Выравниваем картинку по центру
   var imgLeft=(document.documentElement.clientWidth-theImage.width)/2;
    var imgTop=(document.documentElement.clientHeight-theImage.height)/2;
    theImage.style.left=imgLeft+"px";
    theImage.style.top=imgTop+"px";
    return theImage;
}

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

Не подскажет ли кто, почему?

p.s. Как сделать совершенно по-другому, чтобы работало, я знаю. Интересно в чем причины аномального поведения именно в этом случае.

Добавлено через 16 часов 0 минут
Разобрался в том, что надо сделать, чтобы код в IE8 работал.

Оказывается в IE функция onload работает только если src изображения размещен после привязанной к нему функции onload. У меня он стоял в начале. Поэтому вызываемая из него функция imagePlace(theImage) не запускалась.

Вопрос решен. Извиняюсь, что он был некорректным.

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

14.03.2016, 11:08

Ответы с готовыми решениями:

Выравнивание блоков на 100% по ширине и высоте без зазоров и отступов
Ребят, я начинаю свой путь в верстке и постоянно сталкиваюсь с проблеммой выравнивания блоков на 100% по ширине и высоте. Блоки вечно...

Ограничение текста по ширине/высоте
Интересует, как ограничить текст по ширине, в плане того, что достигает скажем 250px и появляется многоточие, а весь оставшийся текст...

Видео по ширине и высоте экрана
Есть видео, нужно растянуть его по высоте и ширине экрана. Как это сделать? <video autoplay loop muted...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

14.03.2016, 11:08

Помогаю со студенческими работами здесь

Градиент не растягивается на 100% по высоте и ширине
Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто указать цвет. <!DOCTYPE...

Сколько пикселей у экрана по ширине/высоте?
Доброго времени суток! Задался я вопросом (может и дилетантским), как определить сколько пикселей по высоте /ширине у экрана. Есть,...

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

Сделать элементы тулбара одинаковыми по ширине и высоте
Есть тулбар с элементами типа QAction. Каждый QAction это текст + иконка. Как можно сделать, что бы все элементы в тулбаре приняли...

Шрифт в CSS определяется по высоте или ширине?
Вот столкнулся с проблемой - есть ведь 1280*1024, а есть 1280*800, а шрифт надо чтоб выглядел одинаково. По ширине или по высоте он...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

Наверх