ширина изображения

[MasterP]

задача такова: есть картинка:

<img src="bg/1.png" id="main-bg"/>

и такой вот стиль для нее:

#main-bg {width:100%; display:block}
.wide #main-bg {width:1092px; display:block}

необходимо, чтобы картинка занимала 100% отведенного под нее пространства в <div>, покуда разрешение экрана в ширину не превышает 1300 пикселей (то есть у пользователя экран 4 к 3, "квадратный").

если же экран широкоформатный (в ширину больше 1300), то нужно, чтобы картинка была шириной в 1092 пикселя.

для этого в конце боди пишу скрипт:

<script type="text/javascript">
	function checkWindowSize() {
		if ( $(window).width() > 1300 ) {
			$('body').addClass('wide');
		}
		else {
			$('body').removeClass('wide');
		}
	}
	checkWindowSize();
	$(window).resize(checkWindowSize);
</script>

не могу найти косяк: картинка всегда занимает 100% ее родителя - дива - и не собирается останавливаться при увеличении ширины окна за 1300 пикселей.

Поможете найти проблему?

______

п.с. скрипт я делал по инструкции, а не сам. пробовал заменить боди в нем на имг, но это не сработало. может, пытаться изменять размер дива?

если что, вот код дива, в котором находится эта картинка:

<div id="big-pic" align="center" style="margin-top:3%; margin-bottom:8%; margin-left:8%; margin-right:8%">
</div>

[amelice]

Я новичок, и мне не понятны ваши действия:

#main-bg {width:100%; display:block}
.wide #main-bg {width:1092px; display:block}

1. Для одного элемента два стиля с разной шириной?

2. где у вас описание стиля .wide(он у вас еще в скриптах задействован) или элемент с таким классом? если до рисунка не будет элемента с классом .wide, то будет работать первый стиль в любом случае. Если он есть то, по приоритетам должен работать второй.

не могу найти косяк: картинка всегда занимает 100% ее родителя - дива - и не собирается останавливаться при увеличении ширины окна за 1300 пикселей.

Думаю, что работает первый стиль.

[MasterP]

по умолчанию используется

#main-bg {width:100%; display:block}

если же окно в ширину занимает больше 1300 пикселей

if ( $(window).width() > 1300 ) {
                        $('body').addClass('wide');
                }
                else {
                        $('body').removeClass('wide');
                }

то элемент с айди main-bg получает класс wide, и к нему применяется другой стиль:

.wide #main-bg {width:1092px; display:block}

[amelice]

по умолчанию используется

#main-bg {width:100%; display:block}

если же окно в ширину занимает больше 1300 пикселей

if ( $(window).width() > 1300 ) {
                        $('body').addClass('wide');
                }
                else {
                        $('body').removeClass('wide');
                }

то элемент с айди main-bg получает класс wide, и к нему применяется другой стиль:

.wide #main-bg {width:1092px; display:block}

А где этот элемент с классом .wide у вас в коде? Или можно его создать в скриптах, описать в стилях, потом можно применить при определенных условиях даже если этого элемента с таким классом в коде нету?

Edited July 2, 2011 by cheburek

[MasterP]

скрипт, что вы цитируете, добавляет класс wide для всех элементов в боди. в частности, и для изображения main-bg.

то есть скрипт определяет ширину окна, а я пишу 2 стиля для элементов: на случай "квадратного" экрана и на случай широкоформатного.

Edited July 2, 2011 by MasterP