Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изображение по размеру экрана (https://javascript.ru/forum/dom-window/17164-izobrazhenie-po-razmeru-ehkrana.html)

Silk 08.05.2011 18:31

Изображение по размеру экрана
 
Здраствуйте.
Сайт фотографа, там нужно было галерею сделать не сложную, для просмотра работ, и фотографии разных размеров. Просматривать сайт всегда будут конечно с разных компьютеров, и соответственно в разным мониторах.
Подскажите как сделать, чтобы все изображения в галереи ставали ровно под размер экрана.

ArmagedDance 09.05.2011 16:58

Размер рабочей части браузера кроссбраузерно достается из
$(document).width() и $(document).height() при использовании jquery.
Двигайтесь в этом направлении.

Silk 09.05.2011 21:11

я не знаю js, работаю только по принципу "Достать\вставить", надеялся что вы дадите просто какую нибудь строчку или значение для добавления в общий текст, и в итоге все должно выйти кошерно

ArmagedDance 10.05.2011 16:06

1. Подключаете библиотку jquery в свой сайт, скачав ее с официального сайта, например.
2. Берете блок с вашим изображением к примеру <div id=image><img src=""></div>
и
3. прописываете в скрипте под jquery следующее:
<script>
$(document).ready(function(){
var screenwidth=$(document).width();
$('#image img').width(screenwidth);
});
</script>
и теперь изображение в блоке image у вас будет растягиваться по ширине экрана.
Но надо сказать что вы изначально выбрали неосуществимую задачу, у вас не получится одновременно растягивать изображение и по ширине и по высоте в браузерах, ибо браузеров десятки и разрешений, под которыми сидят юзеры - десятки, под всех не угодите, если не хотите чтобы ваши изображения наблюдались в совершенно диких пропорциях, если будете еще ресайзить и height.

melky 10.05.2011 18:44

зачем оно нужно?

пропишите ширину через CSS

и не надо заставлять браузер лишний раз перерисовывать то, что он нарисовал непосильным трудом.

poorking 10.05.2011 19:34

<!DOCTYPE html>
<style type = "text/css">
html, body, .wrapper, .wrapper > img{
   width: 100%;
   height: 100%;
}
</style>
<div class = "wrapper">
   <img src= "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
</div>


Часовой пояс GMT +3, время: 16:21.