Размер изображений на веб -странице кажется таким же. На самых распространенных страницах статьи с несколькими изображениями размер картинки обычно совпадает с шириной страницы. Таким образом, страница выглядит как прямая цилиндрическая форма. Если вы видите слишком много этого макета, вы будете чувствовать себя очень монотонным. Я думаю, что эта ситуация в значительной степени связана с ограничениями старомодных браузеров. Тем не менее, с популярностью современных браузеров (Firefox/Google/IE11), браузеры имеют меньше и меньше ограничений на дизайн страницы, и воображение веб -программистов может быть значительно привлечено.
Например, Ленг Чжи: Знаете ли вы, откуда [x], из которого взялось каждое окно? В этой статье многие картинки превышают предел ширины текста, что дает людям ощущение ошеломляющего и ошеломляющего. В то же время, большие картинки отображаются в их реальном размере, что дает людям более шокирующее чувство.
Но технически мы можем легко ограничить изображения максимальной шириной текста, чтобы все они поддерживали ширину, и когда мы не следуем по ширине текста, нам нужен размер каждого изображения. Мы можем объявить исходный размер изображения при редактировании на сервере. Более гибким способом является динамическое получение исходного размера изображения, поместив кусок JS на странице и динамически изменить размер отображения изображения. Это совместимо со старой максимальной шириной текста, а также может сделать изображение появиться в исходном размере при необходимости.
Как получить исходный размер изображения на стороне браузера с помощью JavaScript?
Кода -копия выглядит следующим образом:
var img = $ ("#img_id"); // Получите мой img elem
var pic_real_width, pic_real_height;
$ ("<img/>") // Сделать копию памяти изображения, чтобы избежать проблем с CSS
.attr ("src", $ (img) .attr ("src"))
.load (function () {
pic_real_width = this.width; // Примечание: $ (это) .width () не будет
pic_real_height = this.height; // Работаем на изображениях памяти.
});
Webkit Browser (Google Chrome и т. Д.) Может получить значения высоты и ширины после загруженного события изображения. Таким образом, вы не можете использовать функцию тайм -аута для ожидания, задерживаясь, лучший способ - использовать событие на загрузке изображения.
Чтобы избежать влияния CSS на размер изображения, приведенный выше код копирует изображение в память для расчета.
Если ваша страница представляет собой старомодную страницу, вы можете встроить этот код в нижней части страницы по мере необходимости, и это не требует от вас изменения исходной страницы.