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

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

1 голос
/ 21 декабря 2011

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

Справа от браузера в таблице у меня есть изображение, котороеможно кликнуть с помощью кликабельной ссылки.Это пейзажные и портретные изображения.Изображения в альбомной ориентации имеют разрешение 900 x 700 пикселей, а изображения в портретной ориентации - при разрешении 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 x700 макс и сжимаются соответственно.Есть ли код, который можно добавить, чтобы это произошло?

1 Ответ

1 голос
/ 21 декабря 2011

Чтобы сжать элементы, вы должны использовать eventHandler для события resize, получить clientWidth и Height и изменить размер через 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 имеет математическую формулу для изменения размера элементов, которые вы хотите.Здесь вы можете добавить свой собственный процент страницы и установить минимальную и максимальную ширину или высоту.

...