Существуют ли какие-либо способы для значений CSS реагировать на ширину окна, кроме экрана @media?

Вы всегда можете использовать значение ширины percent. Например, если вы хотите, чтобы большая фотография масштабировалась до расстояния, которое она имеет с нижней частью браузера, вы можете использовать что-то вроде:

#photo{
    bottom:60%;
    width:50%;
}

Таким образом, вы всегда будете иметь одинаковые соотношения в вашем окне. Конечно, чтобы это произошло, вы должны определить контейнер positiom:relative полной ширины.

Вы можете использовать единицы просмотра для этого

FIDDLE (изменить размер окна)

div {
  border: 2px solid tomato;
  margin-top: 5vw;
}

<div>Test</div>

Если вы хотите масштабировать размер изображения в соответствии с шириной родительского элемента, используйте этот прием: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

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

Что касается положения изображения, трудно понять, чего вы пытаетесь достичь с помощью

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

Вы не можете изменить значение top в зависимости от ширины родительского элемента, однако вы можете использовать тот же трюк padding для позиционирования изображения. Быстрый пример ниже. Значение padding-bottom зависит от ширины родительского элемента.

        #outer
        {
            position: absolute;
            bottom: 0;
            right: 0;
            padding-bottom: 50%;
            border: 1px dashed red;
        }

        #inner
        {
            width: 30px;
            height: 30px;
            border: 1px dashed blue;
        }

    </style>


    <div id="outer">
      <div id="inner"></div>
    </div>