Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как узнать реальный размер изображения. (https://javascript.ru/forum/dom-window/23376-kak-uznat-realnyjj-razmer-izobrazheniya.html)

vadim5june 09.05.2012 15:12

Цитата:

Сообщение от Раед (Сообщение 173416)
Den1xxx,
Истиный размер узнаётся через naturalWidth/naturalHeight. Но, это, по-моему, не кроссбраузерно.

В хроме работает-и не знал что такое есть

FreeStyler 09.05.2012 20:36

Цитата:

Сообщение от Раед (Сообщение 173416)
Den1xxx,
Истиный размер узнаётся через naturalWidth/naturalHeight. Но, это, по-моему, не кроссбраузерно.

ну натурал не поддерживают ишаки до 9 как написано на английском...
почему-то это не предлагать?? -_- маны, первоисточники на инглише если что... и это вообще 2ой язык программиста! :-E

Для себя так сделал:

this.width=this.naturalWidth

Den1xxx 12.06.2012 10:57

Цитата:

Сообщение от FreeStyler (Сообщение 173476)
ну натурал не поддерживают ишаки до 9 как написано на английском...
почему-то это не предлагать?? -_- маны, первоисточники на инглише если что... и это вообще 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">

Deff 12.06.2012 13:21

Цитата:

Сообщение от Den1xxx
Но иногда пользователи закачивают картинки меньше заданной ширины, они принудительно растягиваются до заданного размера,

css решение такое:
img{
 max-width:180px;
 max-height:200px;
}

Den1xxx 18.06.2012 22:53

Цитата:

Сообщение от Deff (Сообщение 180974)
css решение такое:
img{
 max-width:180px;
 max-height:200px;
}

Решение неправильное, поскольку меняет соотношение сторон исходной картинки.
Нужно ограничивать только по одной стороне (ширине) — и соотношение сторон сохранится.
Высоту не нужно ограничивать — ведь все сайты обычно могут растянуться по высоте без ограничений и с дизайном ничего не случится:)

Deff 18.06.2012 23:15

Цитата:

Сообщение от Den1xxx
Решение неправильное, поскольку меняет соотношение сторон исходной картинки.

Продемонстрируйте :)

Den1xxx 18.06.2012 23:34

Цитата:

Сообщение от Deff (Сообщение 182401)
Продемонстрируйте :)

Мде, действительно промахнулся:) Вы правы, хоть и не пойму почему:9
Ведь должно было смениться соотношение сторон, если картинко больше заданных величин?
Впрочем, код только что не сработал под ИЕ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>

Deff 18.06.2012 23:56

Den1xxx,
При указаниях max- и min- вторая строна, при ограничениях получает
width:auto; или height:auto; в зависимости от того, что фиксируем
Траблы могут быть при одновременном использовании max- и min-

Den1xxx 19.06.2012 00:10

Цитата:

Сообщение от Deff (Сообщение 182423)
Траблы могут быть при одновременном использовании max- и min-

Да я уже почитал спецификацию w3c и понял что ошибся — обычная логика не сработала;)
Но плохо что на ИЕ это не работает. А так конечно тогда бы можно было пользоваться:)

Deff 19.06.2012 00:30

Цитата:

Сообщение от Den1xxx
Но плохо что на ИЕ это не работает. А так конечно тогда бы можно было пользоваться

Хм - http://hostjs-mybb2011.narod.ru/IMGmax.htm
Странно - У меня работает в ИЕ 6-7


Часовой пояс GMT +3, время: 08:15.