Как уменьшить фоновую картинку?

[vissper]

Всем привет!

Я пока новичок в разработке сайтов, пишу свой первый сайт, решил прикрутить галлерею. За основу взял код отсюда: http://www.artlebedev.ru/tools/technogrette/js/filmstrip/

style type="text/css">
	#fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
	.fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
	.fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
	.fsControl.disabled { color: #666666; }
	#fsScreen { height: 300px ! important; background: no-repeat 50% 50%; }
</style>
<div id="fsClipper">
	<div id="fsScreen"></div>
</div>
<p>
	<span id="fsControl_prev" class="fsControl">←</span>
	<span id="fsControl_next" class="fsControl">→</span>
</p>
<p id="fsLinks">
	<a href="/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg', 200, 200 )">он</a>,
	<a href="/portfolio/illustrations/i/577698ac49499acc.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/577698ac49499acc.jpg', 200, 200 )">они</a>,
	<a href="/portfolio/illustrations/i/69d02a844a673326.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69d02a844a673326.jpg', 200, 200 )">она</a>,
	<a href="/portfolio/illustrations/i/69fbeb22269a853d.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69fbeb22269a853d.jpg', 200, 200 )">оно</a>
</p>
<script type="text/javascript">
	function Filmstrip(){
		this.ePicture = document.getElementById('fsScreen');
		this.ePrev = document.getElementById('fsControl_prev');
		this.eNext = document.getElementById('fsControl_next');
		var eLinks = document.getElementById('fsLinks');
		this.aeLink = eLinks.getElementsByTagName('A');
		this.show_picture = function( sBackground, iWidth, iHeight ){
			this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
			if( iWidth )
				this.ePicture.style.width = iWidth;
			if( iHeight )
				this.ePicture.style.height = iHeight;
			this.set_current( sBackground );
		}
		this.set_current = function( sHref ){
			for( var i = 0; i < this.aeLink.length; i++ ){
				if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
					this.aeLink[i].className += " current";
					this.ePrev.className = this.ePrev.className.replace( /s+disabled/g, "" );
					this.eNext.className = this.eNext.className.replace( /s+disabled/g, "" );
					if( i == 0 ){
						this.ePrev.className += " disabled";
						this.ePrev.onclick = function(){};
						this.eNext.onclick = this.aeLink[i + 1].onclick;
					}else if( i == this.aeLink.length - 1 ){
						this.eNext.className += " disabled";
						this.eNext.onclick = function(){};
						this.ePrev.onclick = this.aeLink[i - 1].onclick;
					}else{
						this.eNext.onclick = this.aeLink[i + 1].onclick;
						this.ePrev.onclick = this.aeLink[i - 1].onclick;
					}
				}else{
					this.aeLink[i].className = this.aeLink[i].className.replace( /s*current/g, "" );
				}
			}
		}
	}
	var oFilmstrip = new Filmstrip();
	function Show_picture( sHref, iWidth, iHeight ){
		oFilmstrip.show_picture( sHref, iWidth, iHeight );
		return false;
	}
	oFilmstrip.aeLink[0].onclick();
</script>

Но смущает меня, то что слишком большие картинки при этом обрезаются. Каким способом можно было бы пропорционально уменьшить изображения, что бы они нормально смотрелись?

[rus]

Ответ на вопрос ищем в этой строке:

#fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }

ключевые слова: height и width.

[Dimitry Wolotko]

Сидел и втуплял минуты две.

Потом вспомнил скрипт.

Вот память то

[rus]