Автоматическое изменение размера изображений с помощью JavaScript?

Question

У меня есть приложение, которое позволяет людям размещать изображения в профилях друг друга с помощью bb-кода. Проблема в том, что некоторые сообщения очень большие, которые охватывают другие части сайта при просмотре.

Как уменьшить изображения на стороне клиента, чтобы они не превышали размеры x по y?

EDIT. Это изображения стиля профиля MySpace .... которые публикуются с тегами [img]. Они не загружаются и не сохраняются на самом сайте.

Answer 1

Вместо этого уменьшите их на стороне сервера. Я предполагаю, что вы все равно храните его там. Хранение его сократит объем данных, передаваемых с сервера клиентам. Если вы храните большие изображения, многие ненужные данные будут отправляться клиенту в каждом запросе медленнее.

Если вы действительно хотите сделать это на стороне клиента, я думаю, CSS изменит его размер для вас.

EDIT: Попробуйте ниже, увидел, что используется на другом форуме, работает в IE и должны работать в большинстве браузеров: С помощью CSS, установите IMG иметь:

width: 590 px; 

и DIV sorrounding it:

max-width: 590 px; 

Answer 2

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

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

Другим вариантом является то, что изображение отображается внутри div с заданным размером и переполнением: скрыто.

Answer 3

CSS:

#post img { 
    max-height: 1000px; 
    max-width: 500px; 
}