Как узнать реальный размер изображения.
Вопрос из серии "а возможно ли".
В комментарии парсится изображение <img width="300px" alt="archive.png" src="./uploads/archive.png"> Движком в коде картинки задается ширина отображения, чтобы пользователь в комментах не испортил дизайн. А возможно ли получить её реальную ширину? Чтобы не растягивалась при парсинге, если например реальная картинка меньше 300px. |
Мне кажется, вам не в JS надо размер картинки узнавать, а на сервере.
А так вообще вроде можно картинку грузить в невидимом диве, например, и после загрузки узнать её высоту и ширину через атрибуты. М.б. кто-то предложит более элегантный способ. |
Цитата:
Поэтому решать лучше на стороне клиента. В невидимом диве — это вариант конечно, но когда картинок 20 на странице, получится г..нокод. |
То есть вам нужно, чтобы картинки не были больше, скажем, 300 пикселей? Так используйте css. Что-то вроде:
img { max-width: 300px; height: auto; } |
Цитата:
То есть если картинка больше 300px, то ей присваивается ширина 300px, если меньше — остаётся первоначальный размер. Или мне нужен ответ, что этого сделать нельзя — узнать истинный размер картинки на яваскрипт. |
"Истинный" размер узнаётся через offsetWidth/offsetHeight.
А то, что вам нужно - это тот стиль, что я скинул. |
Цитата:
|
Den1xxx, ну как поковырял??))
Тоже такая проблемка встала <img onclick="this.width=this.offsetWidth" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="200"> что-то никак, дык что никак не узнать реальный размер после изменения?? UPD: В лисе работает метод .naturalWidth И тут материальчик есть по этой теме http://www.jacklmoore.com/notes/natu...alheight-in-ie |
После изменения вот так можно получить размер
function f(src){var img=new Image(); img.onload=function(){alert(this.width)}; img.src=src} --- <img onclick="alert(this.offsetWidth);f(this.src)" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="200"> |
Den1xxx,
Истиный размер узнаётся через naturalWidth/naturalHeight. Но, это, по-моему, не кроссбраузерно. |
Цитата:
|
Цитата:
почему-то это не предлагать?? -_- маны, первоисточники на инглише если что... и это вообще 2ой язык программиста! :-E Для себя так сделал: this.width=this.naturalWidth |
Цитата:
Напомню проблему. Скриптом всем закачанными пользователем картинкам задаётся одинаковая ширина. Это чтобы слишком большие картинки не поломали дизайн. Но иногда пользователи закачивают картинки меньше заданной ширины, они принудительно растягиваются до заданного размера, что выглядит некрасиво. Дело осложняется ещё тем, что картинка может быть вставлена и со стороннего сервера, так что проверять размер на сервере — не вариант. Вот что получилось у меня в итоге (здесь 200 — ограничение размера картинки): <img onload="var img=new Image(); img.src=this.src; if(img.width>200) this.width=200; else this.width=img.width;" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="200px"> |
Цитата:
img{
max-width:180px;
max-height:200px;
}
|
Цитата:
Нужно ограничивать только по одной стороне (ширине) — и соотношение сторон сохранится. Высоту не нужно ограничивать — ведь все сайты обычно могут растянуться по высоте без ограничений и с дизайном ничего не случится:) |
Цитата:
|
Цитата:
Ведь должно было смениться соотношение сторон, если картинко больше заданных величин? Впрочем, код только что не сработал под ИЕ9, а значит не годится в боевых условиях.
<html>
<head>
<title>Последние новости...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"/>
<style>
img{
max-width:500px;
max-height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<img src="http://5557070.by/content/slider/slide100.jpg"/>
</body>
</html>
|
Den1xxx,
При указаниях max- и min- вторая строна, при ограничениях получает width:auto; или height:auto; в зависимости от того, что фиксируем Траблы могут быть при одновременном использовании max- и min- |
Цитата:
Но плохо что на ИЕ это не работает. А так конечно тогда бы можно было пользоваться:) |
Цитата:
Странно - У меня работает в ИЕ 6-7 |
Цитата:
|
Цитата:
Почему не работает этот?
<html>
<head>
<title>Последние новости...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"/>
<style>
img{
max-width:500px;
max-height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<img src="http://5557070.by/content/slider/slide300.jpg"/>
</body>
</html>
|
Den1xxx,
Без <!doctype html> на странице В ИЕ редко что пашет
<!doctype html>
<html>
<head>
<title>Последние новости...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"/>
<style>
img{
max-width:500px;
max-height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<img src="http://5557070.by/content/slider/slide100.jpg"/>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:17. |