(CSS) Resize iFrame and its content

This is an issue that could be occurring in any CMS. In many cases that editor wants to embed an iframe into the content area, but the content is sometimes not fit exactly the layout of the website, it could be over the wild. This is what I learned by solving this case.

有時候在新增CMS內容，會想放入另一個網站的內容，這時會使用iframe，但很多時候另一個網站可能沒有Responsive Design，導致放入iFrame時候會產生卷軸，手上其中一個維護案就遇到了這個問題，這篇記錄如何解決這問題

Basic iframe :

<iframe src="https://www.google.com"></iframe>

The key concept is 

1. Setting the iframe content display without x and y scroll bar.

2. Using transform:scale to resize according to the original scale

<style>
iframe{
     -webkit-transform:scale(0.5);
     -moz-transform-scale(0.5);
}
</style>

Resize scale can be adjusted according to screen width. 

Answer resource

https://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width