Как настроить отображение картинки на разных разрешениях?

Я как-то делал responsive banner по этому how-to от Adobe, возможно вам будет на будущее полезным (потребуется Adobe Edge Reflow CC). А так для вашей конкретной задачи можно воспользоваться сервисами типа Specless или куда более крутым BannerFlow.

@media (min-width: Npx){ /*набор стилей*/ }

@media (max-width: Npx){ /*набор стилей*/ }

где N - значение.

Подробнее - http://stackoverflow.com/a/13550716

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<div id="banner">
	<img src="/image/pic.jpg">
</div>

<script>
$(function(){
	$('#banner').ready(function(e){
		var width = screen.width;
		if(width < 1000) { // Если ширина дисплея меньше 1000px
			$('#banner').find('img').attr('src', '/image/pic_small.jpg');
		}
	});
});
</script>

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

К примеру есть кнопочка

<span id="close-banner">x</span>

Тогда пишем скрипт
$(function(){
    $('#close-banner').on('click', function() {
        // Тут создаем cookie (banner=close)
        
        // удаляем код баннера с страницы
        $('#banner').remove();
    });
});

Тогда нужно поправить HTML код вывода баннера. Я не в курсе на чем у вас написан двиг, но в любом случае нужно проверять куку именно на серверном движке, чтобы баннер временно не отображался на страницах в случае если он закрыт.

Ну а так, будет как то так

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<?php if($banner) { ?>  // $banner - переменная содержит (true/false), значение переменной определяется проверкой существования куки
    <div id="banner">
	    <img src="/image/pic.jpg">
    </div>
<?php } ?>

rerighter, спасибо, полезно.

Ms-Dred, а готовое решение можете скомпилировать? Я не прогер, не смогу все сопоставить в 1 файл.