Как вставить страницу с другого сайта в свой, изменив её масштаб

Эта статья рассказывает о том, как была разрешена вот такая ситуация

Пробую iframe, но страница, которую нужно вставить, значительно больше области, в которую её вставляю (примерно в 2 раза) — поэтому во фрейме отображается частично. Инструментов масштабирования у iframe нет.

Попробовал выполнить масштабирование вот так:

<div  style='transform: scale(0.5)'>
<iframe src=site1.ru/page1.aspx>
</iframe> 
</div>

Пробовал я и вот такой вариант: поставить

zoom: 0.5;

но почему-то не сработало. Уже не помню, почему.

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

Следующее, что я сделал, это попробовал переместить блок

<div></div>

наверх с помощью абсолютного позиционирования

position:absolute;top:-4200;

Это обеспечило перемещение блока div к верху экрана, но под ним всё равно осталась куча места.

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

transform-origin 0 0;

Виталий Емельянцев:

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

И вот теперь из вот этого состояния:

<div style='transform: scale(0.5); position:absolute;top:-4200;'>

был получен вот такой вариант:

<div style='transform-origin: 0 0; transform: scale(0.5);'>

Теперь страница (с фреймом) стала находиться в левом верхнем углу, как и положено

Но гигантское расстояние под фреймом всё равно осталось.

Виталий Емельянцев:

абсолютно логично
контент масштабировался, а само поле нет
потому что это не реальное масштабирование, это transform
оно не работает в старых версиях браузеров, например
можно задать margin-bottom: -5000px;

Итогом стала вот такая запись, позволившая вставить в фрейм контент с маштабированием, подогнать его под ту запись wordpress, которая требовалась:

<div style='transform-origin: 0 0; transform: scale(0.5); margin-bottom:-5000px;'><iframe src='https://site1.ru/page1.aspx' frameborder='0' scrolling='no' width='1400px' height='17700px'>
    Your browser does not support iframes.
</iframe> 
</div>

Надеюсь, данная статья окажется вам полезной, если вы пытаетесь вставить фрейм в свой сайт. По крайней мере, я убил на эти попытки 1,5 рабочих дня. )) И, думаю, если бы не помощь Виталия — вряд ли бы сам оперативно дошёл до мысли, как это сделать максимально просто.

Поэтому я откровенно советую обратиться к нему за профессиональной помощью в вопросах создания сайтов, лендингов, лидогенерации. Уверен, это сотрудничество будет не только плодотворным, но и приятным, так как Виталий — ещё и очень открытый и приятный человек )

Ссылочка на него: Виталий Емельянцев, группа в контакте: Технологические лендинги и продающие сайты. Ну а о его интересах и стремлениях можно прочитать в его паблике: Марафон с нуля до миллиарда. Виталий Гамбáла. Удастся ли?

На этом желаю удачи. С уважением, Александр Крылов.

p.s. В помощью индексации гуглу и яндексу: собственно, вот эта штука —

transform: scale

— позволяет подстроить размер страницы под разрешение экрана монитора, масштабировать страницу при изменении разрешения, менять ширину сайта, проводить адаптацию блочных элементов страницы html, пропорционально их уменьшая или увеличивая. Ну а для меня она позволила уменьшить содержимое (контент) iframe.