Как я могу контролировать размер изображения

Question

Я опытный программист базы данных/приложений для ПК. Я также неосведомленный html/javascript/веб-программист.

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

Я прочитал много нового, но не смог найти ничего, что соответствовало бы тому, что я хотел. Сначала я попробовал это (после нескольких итераций):

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'> 

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

Итак, я попытался получить фантазию. Я не мог понять, как решить проблему 1, но решил 2 и 3, создав функцию в отдельном файле. Затем я столкнулся с тем, что, похоже, было той же проблемой. Это была моя вторая попытка:

function ImageToggle(Image) 
{ 

    if (ImageToggle.FullSize == 'undefined') 
     ImageToggle.FullSize = false; 

    if (ImageToggle.FullSize) 
     { 
      Image.width='100%'; 
      ImageToggle.FullSize = false; 
     } 
    else 
     { 
      Image.width=Image.naturalWidth; 
      ImageToggle.FullSize = true; 
     } 

    return 0 
} 

И в моей странице:

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'> 

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

Answer 1

Спасибо всем за помощь. Роб и Майк оба указали мне на отличное решение. Теперь у меня загружается страница с изображением, которое соответствует окну браузера, изменяет размер с помощью браузера, и если пользователь заинтересован, они могут расширить изображение, а полосы прокрутки появятся, если необходимо. Я получил это для работы в функции, поэтому для каждой страницы требуется минимальный код.

Для загрузки изображения:

<p style="overflow:auto;"> 
    <img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'> 
</p> 

И функции:

function ImageToggle(Image) 
{ 
    if (ImageToggle.FullSize == 'undefined') 
     ImageToggle.FullSize = false; 

    if (ImageToggle.FullSize) 
     { 
      Image.style="max-width: 100%"; 
      ImageToggle.FullSize = false; 
     } 
    else 
     { 
      Image.style="max-width: none"; 
      Image.width=Image.naturalWidth; 
      ImageToggle.FullSize = true; 
     } 

    return 1 
} 

Answer 2

Возможно, вас интересует свойство CSS max-width: 100%, а не плоский width:100%. Если у вас крошечный образ, он останется крошечным. Если у вас огромное изображение, оно изменяется до ширины содержащего элемента.

Например: http://jsbin.com/kabepo/1/edit использует небольшое и огромное изображение с максимальной шириной: 100%. Как вы можете видеть, маленькое изображение не тронуто, огромное изображение изменено на нечто разумное.

Answer 3

Я бы порекомендовал вам установить для свойства CSS значение max-width: 100%.

Это предотвратит расширение ширины изображения, превышающее ширину контейнера.

Вы также можете сделать то же самое с max-height: 100%, если у вас возникли проблемы с переполнением изображения по вертикали.

Для примера см. Этот JSFiddle.

(Примечание. Если установить как ширину и атрибут высоты на <img> тега непосредственно или в файл CSS изображение не будет масштабироваться пропорционально)

Answer 4

, если вы хотите, чтобы получить текущий размер окна браузера и если вы хотите сделать это на событие щелчка так попробовать это в JQuery или JavaScript:

<script> 

$("#myButton").click(function(){ 
     var x = window.innerHeight;    // put current window size in x (ie. 400) 
}); 

</script> 

Answer 5

ли это быть пуговица или обслуживали бы Mouseover работа для вас, а?

<style>

.FullSize { width:100px; height:auto; }

.FullSize:hover { width:90%; height:auto; }

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

---

Примечание: когда изображение состоит из л arger IN the page - окружающий контент будет перемещен вокруг него - в зависимости от того, как вы настроили макет.

Также, если у вас есть поля тела или таблицы или div paddings, использование ширины изображения на 100% сделает прокрутку страницы. Чтобы проверить, просто измените 90% до 100% и проведите свой путь вверх/вниз.

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

---

<style>

.FullSize {width:1000px;max-width:100%;height:auto;}

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

---

Наконечник: изображение, используемое должно быть самым крупным. Таким образом, минимальная ширина позволяет говорить 1200 пикселей в ширину (если это размер принудительного изображения, который вы используете). Таким образом, независимо от размера, он будет оставаться яснее, чем небольшое изображение становится большим. Поскольку это интрасеть, размер файла не должен быть проблемой.