How to change the size of this iframe?
Question
I want to embed this iframe into my webpage:
<iframe height="600px" width="600px" src="https://ionicabizau.github.io/github-profile-languages/api.html?damienAllonsius" frameborder="0"></iframe>
EDIT
I get this cool result but unfortunately the iframe is too big.
So how can I rescale it ? Let's say I want it 50% smaller.
When I change attributes height and width from 600 to 300 , I get this result
How can I fix that ? Changing the width and heigh with a CSS class does not change the result. Any idea ?
2 answers
solution1
2 ACCPTED 2019-07-15 08:47:27
Just apply CSS properties transform and transform-origin to the iframe :
-
transformwill change the size of the wholeDOM objecttree (Also font size and so on) -
transform-originwill specify that the resize should start fromtop left. Otherwise, it would resize from the center and the resizediframewould flow in the middle.#frame { border: 1px solid black; transform: scale(0.5); transform-origin: top left; }<iframe id="frame" src="http://google.at" frameborder="0"></iframe>
solution2
0 2019-07-15 08:42:47
You may take one div and try to put iframe inside that div.
Apply width:50% to newly created div.
.container-wrapper { width:50%; }
<!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <div class="container-wrapper"> <iframe src="https://ionicabizau.github.io/github-profile-languages/" height="100%" width="100%"> </iframe> </div> </body> </html>
Your iframe content should be responsive enough to display.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.