CODEWITHSUNDEEP
ionic-frameworkiframeionic2ionic3
Shreyas Pednekar
Shreyas Pednekar

Reputation: 1305

Ionic 3- Change iframe content size depending on screen size

I have news section in my app, I'm displaying news using iframe tag from some website, I want change iframe content size depending on the mobile screen size.

News.html code:

<iframe width="300" height="470" src="https://tctechcrunch2011.files.wordpress.com/"></iframe>

My screens looks like this: News screen

Upvotes: 1

Views: 5052

Answers (2)

jme11
jme11

Reputation: 17362

You can style an iframe as you would any other element on the page with CSS. If you use viewport (vw/vh/vmin/vmax) values, you can scale both the height and the width proportionally to the device/window size. Below I've added an id to the iframe:

<iframe width="300" height="470" src="https://tctechcrunch2011.files.wordpress.com/" id="newsframe"></iframe>

In your CSS, you could add rules targeting the element id:

#newsframe {
  //set the height to 100% of the viewport less the height of the header
  height: calc(100vh - 60px);

  //set the width to 100% of the viewport width
  width: 100vw; 

  //remove border, padding, margin
  border: none;
  padding: 0;
  margin: 0;
}

Upvotes: 2

EDISON J
EDISON J

Reputation: 344

If you not give any width size it takes full width.

Upvotes: -1

Related Questions