Изображение по размеру экрана
Здраствуйте.
Сайт фотографа, там нужно было галерею сделать не сложную, для просмотра работ, и фотографии разных размеров. Просматривать сайт всегда будут конечно с разных компьютеров, и соответственно в разным мониторах. Подскажите как сделать, чтобы все изображения в галереи ставали ровно под размер экрана. |
Размер рабочей части браузера кроссбраузерно достается из
$(document).width() и $(document).height() при использовании jquery. Двигайтесь в этом направлении. |
я не знаю js, работаю только по принципу "Достать\вставить", надеялся что вы дадите просто какую нибудь строчку или значение для добавления в общий текст, и в итоге все должно выйти кошерно
|
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. |
зачем оно нужно?
пропишите ширину через CSS и не надо заставлять браузер лишний раз перерисовывать то, что он нарисовал непосильным трудом. |
<!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. |