Всем привет.

Есть некая витрина, на которой в каждый момент времени отображается одна фотка. Также есть кнопки-стрелки (след./пред.) при нажатии на которые фотка "уезжает" влево либо вправо, в зависимости от того, на какую стрелку нажали. Кнопки должны лежать абсолютом, над фоткой, т.е. при движении фотки стрелки остаются на месте.

Эффект стандартный, вроде бы все просто. Проблемы начинаются дальше! Максимальный размер фотки - 1450 пикселей. Если разрешение экрана больше этого размера, слева и справа от фотки появляются поля. А вот если размер экрана меньше этого размера, то фотка по краям должна быть обрезана. И вот тут я не могу понять, как такое сделать, т.к., с одной стороны, блок нужно сделать фиксированной ширины (см. ниже), а с другой - его ширина должна зависеть от разрешения экрана. Как я себе это видел изначально:




Так, повторюсь, получается, с одной стороны, диву outer нужно задать фиксированную ширину, чтобы скрыть все то, что выходит за его пределы, а с другой - она должна меняться в зависимости от разрешения экрана. Скажите, это можно с помощью CSS решить? Или тут JS нужен?