IMHO.WS - Оптимизация картинки для браузеров

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Оптимизация картинки для браузеров (https://www.imho.ws/showthread.php?t=111667)

kolyuchy

25.11.2006 13:35

Оптимизация картинки для браузеров

При верстке сайта столкнулся с проблемой, подгонки изображения под различных пользователей.
[IMG]http://img166.***************img166/7742/pagegeneralxi0.th.jpg[/IMG]
Большая картинка где написано "Стильно! Оригинально! Ярко!", должна быть точно по ширине экрана всегда. Можно ли как-то сделать так чтобы она отображалась нормально(ровно по ширине экрана) и у пользователей с разрешением 800х600 и с разрешением 1280х1024 ... может с помощью JS или PHP. Помогите плиз, очень срочно надо.

RaZEr

25.11.2006 13:46

Сделай на 1600 по ширине и пропиши как фон. У кого разрешение меньше, просто не увидят правого края.

А если всё же хочется изборести велосипед, то определяешь ширину окна (document.body.clientWidth), и далее прописываешь путь к картинке (image.src) как title.php?width=1024. Как преобразовывать саму картинку я слабо представляю, но в общем случае её можно масштабировать по ширине (php.net/imagecopyresampled).

max2k1

27.11.2006 21:05

Живой но банальный пример:

Код:

<img id="TheImage" src="http://img166.***************img166/7742/pagegeneralxi0.th.jpg" border="0"/>

<script language="JavaScript">

<!--

    function xbGetWindowWidth(windowRef)

    {

        var width = 0;

        if (!windowRef) windowRef = window;

        if (typeof(windowRef.innerWidth) == 'number') width = windowRef.innerWidth;

        else if (windowRef.document.body && typeof(windowRef.document.body.clientWidth) == 'number') width = windowRef.document.body.clientWidth;

        return width;

    }



    function xbGetElementById(e)

    {

        if(typeof(e)!='string') return e;

        if(document.getElementById) e=document.getElementById(e);

        else if(document.all) e=document.all[e];

        else e=null;

        return e;

    }



    function on_window_resize(e)

    {

        var v_window_width=xbGetWindowWidth();

        var o = xbGetElementById('TheImage');

        if (o) o.width=v_window_width;



    }



    window.onresize = on_window_resize;

    on_window_resize(null);

// -->

</script>

Часовой пояс GMT +4, время: 09:57.