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 ?

Maybe https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it contains your answer. The answer with six upvotes. — Reporter, Jul 15 '19 at 09:06

MauriceNino · Accepted Answer · 2019-07-15T09:17:18.087

2

Just apply CSS properties transform and transform-origin to the iframe:

transform will change the size of the whole DOM object tree (Also font size and so on)
transform-origin will specify that the resize should start from top left. Otherwise, it would resize from the center and the resized iframe would 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>
```

edited Jul 15 '19 at 09:17

answered Jul 15 '19 at 08:47

MauriceNino

6,214
1
23
60

Sorry but your answer produces the same problem as changing `height` and `width` attribute in the `iframe`. See the bottom of my webpage: https://damienallonsius.github.io/ – dallonsi Jul 15 '19 at 08:57
So what is your actual problem then? Your question was "how to resize an iframe". Here you have the answer to that. If that was not your question, please try to reform your question so that I understand what you want to know. @dallonsi – MauriceNino Jul 15 '19 at 09:15
I have just seen your update. I have updated my answer. Try it with transform. @dallonsi – MauriceNino Jul 15 '19 at 09:17
Perfect !! Thanks – dallonsi Jul 15 '19 at 09:20
1

No problem! Glad I could help. @dallonsi – MauriceNino Jul 15 '19 at 09:22

Shivani Sonagara · Answer 2 · 2019-07-15T09:09:35.863

1

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.

edited Jul 15 '19 at 09:09

answered Jul 15 '19 at 08:42

Shivani Sonagara

1,299
9
21

Sorry but your answer produces the same problem as changing `height` and `width` attribute in the `iframe`. See the bottom of my webpage: https://damienallonsius.github.io/ – dallonsi Jul 15 '19 at 08:57

How to change the size of this iframe?

2 Answers2