Изменение размера изображений вместе с размером браузера, но разные% для пейзажа и портрета HTML

Question

Я огляделся, но не могу найти информацию по этой точной теме, и я надеюсь, что смогу помочь.

С правой стороны браузера в таблице у меня есть изображение, на которое можно щелкнуть с помощью ссылки, доступной для клика. Это пейзажные и портретные изображения. Пейзажные изображения имеют размер 900 x 700 pxl, а портретные изображения - 540 x 700. Я хочу, чтобы пейзажные изображения были максимально малыми на 900 x 700 и соответственно уменьшались с учетом размера браузера.

У меня есть возможность изменить размер изображений с помощью кода ниже.

img src="jpegs/pict1.jpg" width="100%" alt="" name="slideImage"/ 

У меня есть изображения в сценарии Java:

<script type="text/javascript"> 

var image = new Array("jpegs/pict1.jpg", "jpegs/pict2.jpg", 
"jpegs/pict10.jpg", 
"jpegs/pict9.jpg" 
) 

Но, портретные изображения получают перекошенные до 900 ширины, а даже если я хочу, чтобы они оставались на 540 х 700 макс и сжиматься соответственно. Есть ли код, который можно добавить, чтобы это произошло?

Answer 1

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

window.$getView = function() { 
     var ret = { 
      width : 0, 
      height : 0, 
      element : null 
     }; 
     if(typeof window.innerWidth != 'undefined') { 
      ret.width = window.innerWidth; 
      ret.height = window.innerHeight; 
      ret.element = window; 
     } else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
      ret.width = document.documentElement.clientWidth; 
      ret.height = document.documentElement.clientHeight; 
      ret.element = document.documentElement; 
     } else { 
      ret.width = document.getElementsByTagName('body')[0].clientWidth; 
      ret.height = document.getElementsByTagName('body')[0].clientHeight; 
      ret.element = document.getElementsByTagName('body')[0]; 
     } 
     return ret; 
    } 

window.addEventListener("resize",resizeHandler); 
resizeHandler : function(evt) { 

    document.getElementById('someImage').style.width = window.$getView().width/10+'px'; 
    document.getElementById('someImage').style.height = window.$getView().height/10+'px'; 
} 

Функция $ getView - это функция перекрестного браузера, чтобы получить ширину и высоту страницы. resizeHandler имеет математическую формулу для изменения размера элемента (ов), который вы хотите. Здесь вы можете добавить свой собственный процент страницы и установить минимальную и максимальную ширину или высоту.