Shrink the content of an iframe to appear without scroll bars

Report · Aug 08, 2013

I would like to add an iframe (from another web page) to my website, but it appears with scroll bars. What code can I use to shrink the contents to fit? Thanks.

http://www.sonobabystudio.com

3D Ultrasound Imaging Website

Report · Aug 08, 2013

Add " frameborder="0" " to the iframe code.

Alternatively for Chrome/Safari you can add "seamless"and that should do the trick, but I don't think IE/Firefox support the seamless attribute yet.

Report · Aug 08, 2013

How big is the webpage? You could try to create a big iframe with 700px x 960px and use scrolling="no" like in this example:

<iframe src="http://www.bbc.co.uk" name="bbc.co.uk"  height="700px" width="960px" frameborder="0" marginheight="20" marginwidth="35" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe>

I doubt you will be able to shrink anything within a fixed height/width environment. Scrolling is always required.

Anyway you can try it but no guarantee to be a perfect solution.

Report · Aug 09, 2013

You can get rid of scroll bars with css. Set the overflow for the iframe to hidden, like this...

iframe {

overflow:hidden;

}

That will remove scroll bars and cut off anything that scrolls in the iframe content.

To make the actual content schrink, you could use a css transform. In this page, I used the fox news website and made the width of the iframe large enough to not need a scroll bar, then shrank the iframe using a transform in the css. There's some fiddling around you need to do to get the positioning right (since it still initially takes up the original size specified in the css) but it can be done. This won't work in old browsers that can't read css transforms though...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

body {

margin:0;

}

iframe {

-ms-transform:scale(0.60);

-moz-transform:scale(0.60);

-o-transform: scale(0.60);

-webkit-transform: scale(0.60);

transform:scale(0.60);

border:1px solid black;

}

iframe {

position:relative;

top:-240px;

left:-220px;

height:1200px;

width:1100px;

}

#wrapper {

overflow:hidden;

border:1px solid orange;

height:722px;

width:662px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Report · Mar 04, 2024

not working this css

Report · Mar 04, 2024

not working this css

By @Rakesh35846263qzl2

Instead of replying to a 10 year old post, I would recommend starting your own thread so you can post your code. As things have changed in 10 years, you could try to combine overflow="hidden" with scrolling="no" as some browsers still support these functions, however, both are deprecated pieces of code and there is no standard to prevent scrolling of an iframe.