Всем доброго дня! Вот на этом сайте opencart 1.5.1.3 http://domikon.com.ua/ возникла задача - чтобы картинка вся умещалась при разных разрешениях экрана. Может есть стандартные приемы или скрипты?
Прочтите http://habrahabr.ru/post/119127/ , возможно, поможет. Вы можете использовать css свойство zoom в связке в screen max-width;
а еще попробуйте свойство background-size: 100%; только почитайте о нем например тут насчет поддержки браузерами.
так пойдет?... ресайзит везде, задает изображение в зависимости от времени суток... если не надо - выкинуть лишнее не проблема HTML: <script type="text/javascript"> function screenSize() { var w, h; // Объявляем переменные, w - длина, h - высота w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)); h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight)); return {w:w, h:h}; } theTime = new Date(); theHour = theTime.getHours(); if(theHour>7&&theHour<18){ jQuery('body').append('<img src="/images/vesna1.jpg" id="bg" alt="" style="display:block;position:fixed;top:0;left:0;min-height:100%;width:100%;z-index:-1;">'); } else{ jQuery('body').append('<img src="/images/vesna3.jpg" id="bg" alt="" style="display:block;position:fixed;top:0;left:0;min-height:100%;width:100%;z-index:-1;">'); } function imageresize() { var width = jQuery('body').width(); var height = jQuery('body').width(); var SSize = screenSize(); jQuery('#bg').attr('width',SSize.w); jQuery('#bg').attr('height',SSize.h+30); } imageresize(); jQuery(window).bind("resize", function(){ imageresize(); }); </script>
Я решил на опенкарте сделать сайт фирмы. Сама идея мне понравилась, поскольку довольно таки шустрый движок. На руселлере скачал скрипт http://ruseller.com/lessons.php?rub=32&id=1034. Очень долго думал куда впихнуть, поскольку не сильно в программировании разбираюсь и вставил вот сюда в header.tpl перед body <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(document).ready(function() { var bgImage = $('#background-image'); function resizeImg() { var imgwidth = bgImage.width(), imgheight = bgImage.height(), winwidth = $(window).width(), winheight = $(window).height(), widthratio = winwidth / imgwidth, heightratio = winheight / imgheight, widthdiff = heightratio * imgwidth, heightdiff = widthratio * imgheight; if(heightdiff>winheight) { bgImage.css({ width: winwidth+'px', height: heightdiff+'px' }); } else { bgImage.css({ width: widthdiff+'px', height: winheight+'px' }); } $("#background-image").show(); } resizeImg(); $(window).resize(function() { resizeImg(); }); }); </script> <img src="http://localhost/domikon/nature.jpg" id="background-image" style="width: 2000px; height:1600px; display: inline;/> </head> <body> В итоге картинка ресайзится, но есть проблема с нижней частью сайта. Я знаю - ответ где-то близко. Мне нужно чтобы картинка определенного разрешения скажем 2560х1600 при разных разрешени экрана полностью занимала всю страницу - от хедера до футера. --- добавлено: Apr 17, 2013 2:08 PM --- мне кстати эта идея понравилась - только - не пойму куда вставить этот код -и что прописывать в css?
