можно переопределить наследование z-index от родительского элемента?

будет иметь высоту (полностью состоящую из нижней части), равную 75% от ширины ее содержащего элемента. Вот хорошее резюме: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Я не уверен, почему это так, но так оно и есть.

Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам понадобится другой обертывающий div, на котором нужно установить ширину:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Недавно я использовал что-то похожее на трюк с изображениями Эллиота, чтобы позволить мне использовать мультимедийные запросы CSS для обслуживания другого файла логотипа в зависимости от разрешения устройства, но все же масштабировать пропорционально, как это делал (Я устанавливаю логотип в качестве фонового изображения на прозрачный .png с правильным соотношением сторон). Но решение Web_Designer избавит меня от HTTP-запроса.