Как показать версию веб-сайта шириной 1920px с тегом iframe в контейнере шириной 720px 'Div'

Question

У меня есть тег iframe для веб-сайта с шириной 1920px (настольная версия), и я хочу масштабировать его, чтобы он соответствовал контейнеру div 720px, не меняя ширину iframe, потому что это даст мне версию для планшета, возможно ли это ? спасибо за помощь !!

Answer 1

Вы можете использовать transform: scale();. Вы хотите масштабировать до 720/1920 = 0,375 = 37,5%.

.wrapper{
  width: 720px;
  /* just a random height to make the resulting code snippet window not too big */
  max-height: 450;
  overflow: hidden;
  border: 2px dashed lightgreen;
}

iframe{
  transform-origin: 0 0;
  transform: scale(37.5%);
}

<div class="wrapper">
  <iframe src="http://example.com/" width="1920" height="1080">
  
  </iframe>
</div>