How to shrink an iframe inside a div to match its width?

Question

What I am trying to do should be simple. But somehow I am not able to find an answer to it. Here is my codepen:

HTML:

<div class="parent">
  <iframe class="child" src="https://reesgargi.com/"></iframe>
</div>

CSS

.parent {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 62.5%;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

I want the iframe to fit inside the div (so that its width = parent div width)

But iframe loads the page zoomed in, from the center.

I have tried using CSS (Flexbox, Table display, and W3S trick

But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)

Please advise my fellow programmers.

If you want to display data from another web in yours, you could do the call to that web on the back end and scrap the data you need from it to present it on yours or check if that web got an API you can leverage... otherwise, you are pretty much stuck with the CSS of that web... check if the web got a tablet or phone version, those will fit better your div. — DIEGO CARRASCAL, Apr 28 '21 at 20:04

score 0 · Answer 1 · edited Apr 28 '21 at 20:18

0

Finally found a solution!

All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).

.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}

edited Apr 28 '21 at 20:18

Dharman

30,962
25
85
135

answered Apr 28 '21 at 20:12

innocent rock

129
10

How to shrink an iframe inside a div to match its width?

1 Answers1