2010-08-17 2 views
0

Я пытаюсь переключаться между различными разрешениями (оригинал-стандарт-высокий) изображения, используя ТОЛЬКО одно изображение. Возможно ли это каким-либо образом? Вот пример того, что я хочу, но он использует три изображения с тремя разными разрешениями, я хочу использовать только одно изображение. http://www.biomedcentral.com/1741-7007/8/59изменение разрешения изображения

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 

<title>resize image </title> 
<style> 
.high{width:500px; image-resolution:300dpi; } 
</style> 
</head> 

<body> 
<img class="high" src="original.jpg" border="0" /><!-- the orginal image width =100 px--> 
</body> 
</html> 

ответ

2

Вы можете просто манипулировать размером отображения изображения с помощью CSS или HTML атрибуты width и height. Это не изменит фактическое разрешение изображения, оно просто отобразит его меньше или больше. Это обычно не выгодно, поскольку большое изображение всегда загружается и, возможно, тратит много трафика и замедляет работу браузера (если вы не уверены, что он будет просмотрен в любом случае, тогда это может быть полезно).

Если вы просто не хотите создавать кучу небольших и больших версий одного и того же файла, посмотрите на изменение размеров изображений «на лету» с использованием серверного языка.

+0

Я пытаюсь использовать ** изображение-разрешение ** ** CSS ** свойство, введенное в ** HTML5 **, чтобы исправить проблему растяжения, но, к сожалению, она вообще не работает ни в одном браузере – loll

+0

@loll Изображение обычно только есть * one * разрешение. Кроме того, не путайте * разрешение * (dpi) с * размерами * (ширина, высота). Чего именно вы хотите достичь? Я не мог получить ничего из вашего связанного примера. – deceze

+0

ну, я хочу изменить разрешение изображения (dpi), используя любой способ javascript, css, java или любую другую технику – loll

2

Вы можете сделать это в формате HTML/CSS, установив размер изображения. Остерегайтесь, однако, что некоторые браузеры делают масштабирование лучше других (например, более ранние версии IE не делают сглаживания, что делает масштабированные изображения зазубренными).

Кроме того, вы действительно хотите, чтобы ваши пользователи загружали все изображения на вашей странице с максимальным разрешением, прежде чем они смогут увидеть миниатюры? Это большая трата пропускной способности, если в общем случае нужно посмотреть только несколько изображений в полном размере.

+0

ну, я пытался сделать это именно по HTML/CSS, но изображение в высоком разрешении выглядит растянутым, я хочу, чтобы сохранить изображение в хорошем виде, и получилось? – loll

+0

Вам нужно сделать изображение с высоким разрешением правильного размера, а затем уменьшить средние и маленькие. – Skilldrick

+0

да, вы правы, но на самом деле у меня есть мои уже существующие изображения с небольшим размером – loll

Смежные вопросы