HTML+CSS+JavaScript

Для размещения на сайте сервис Яндекса предлагает вот такой код:

<script src="http://panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru_RU&l=stv&ll=37.653461 67%2C55.76276528&ost=dir%3A2.789084775132366%2C8.019778688382427~spn%3A90.56310317039635%2C53.66494784934339&size=685%2C370"></script>

Как разместить панораму по центру, задать ей размеры и сделать резиновой?

Проще простого.
Завтра объясню. По событию ресайз нужно изменять размеры фрейма с панорамой.
И всех делов-то.

Спасибо, я догадался!

Похоже, что я рано обрадовался...

Вот посмотрите - http://fh7929mi.bget.ru/49.html Сверху картинка с масштабирующим обрамлением, а снизу канонический код Яндекса. И вверху между картинкой и текстом под ней довольно большое пустое место.

Такая ситуация имеет место при просмотре Хромом, Яндексом, Нихромом и Опера.

Это можно как-то исправить?

(Установлен размер 75%, но и с другими размерами, в том числе при 100%, дефект сохраняется).

Вечером приеду - попробую сделать.

Владимир, я Вам как-то писал про использование средств разработчика в я-браузере (или хроме, не помню точно). В этом случае дело в банальных размерах блоков (div, iframe), попробуйте с ними поэкспериментировать. Средства разработчика позволяют править свойства прямо на открытой странице.

Да, и теперь я использую инспектор кода Хрома. Он позволяет много понять и кое в чем разобраться, но тут особый случай.

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

Все можно!
Это мы предположили, что ширина панорамы должна быть 90% от ширины документа (строка 25).
Вуаля.

Спасибо, работает просто великолепно!

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

Если посмотреть инспектором кода, то можно увидеть, что эта подпись выводится кодом:

<div id="yabs" class="yabs"><a class="yabs__link" href="http://yabs.yandex.ru/count/MBlCowUH0py40000ZhcQP3m5M1gL0Pi1Q8k 8iFho2WUcXGcAfxR7mQe2fQZWW0AHlD19P0 QJXGr2hl4oqyU1OKp-1B41k_2UwHe4WhSm0Ni8" target="_blank">Виртуальная прогулка по улицам Москвы на Яндекс.Картах</a> </div>

Со стилями

*{margin:0;padding:0;border:none;outline:none}html,body{width:100%;height:100%}body{position:relative;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #ddd;background-color:transparent}.player{top:0}.player,.yabs{position:absolute;left:0;width:100%}.yabs{font:90% Arial,Helvetica,sans-serif;right:0;bottom:0;padding:.5em;border-top:1px solid #ddd;background-color:#f6f5f3}.yabs__link:link,.yabs__link:visited{text-decoration:none;color:#000}.yabs:first-letter,.yabs__link:hover:link,.yabs__link:hover:visited{color:#e00}.logo{position:absolute;z-index:1000;right:5px;bottom:5px;display:block;width:56px;height:20px;background:no-repeat 0 -120px url("http://yandex.st/panoramas.api-maps/_/w-QIuiC8Z2UbM_ZCKwsB8ExIDBc.png")}.logo:hover{background-position:0 -140px}.logo_ru{background-position:0 -40px}.logo_ru:hover{background-position:0 -60px}

Насколько я понимаю, для изменения дизайна надписи нужно работать с настройкой class="yabs". Я добавлял в стили #yabs div{display:none;} и div.yabs{display:none;} , в том числе и с !important - не помогает!

Вот такой цепкий код у Яндекса!

is_ifr.contents().find('#yabs').remove();

Камасутра с CSS на странице имеет весьма отдаленное отношение к содержимому фрейма - CSS страницы его "не видит".
Приведенная выше строка, будучи задействована после "прорисовки" содержимого фрейма в DOM, удаляет надоедливую надпись, нарушая тем самым какой-то пункт соглашения по API от Яндекса.
См. аттач.

Интересно, что с этой строкой дня три назад я обратился к человеку, который ведет семинары по CSS и резиновой верстке, и которые я прослушал.

Эта неподдающаяся строка его "задела за живое" и он долго бился, применяя различные CSS директивы и пытаясь поддержать свою репутацию гуру, но потом сдался... А у Вас получилось в одно касание!

Спасибо!

Ну, может быть гуру не знал, что речь идет о содержимом фрейма...