0

I am trying to load an a page in iframe But i only want to show a specific portion of the page into the iframe. i have found this solution :

<iframe src="https://example.com" height="500" width="900" style="position: relative; left: -10%; top: -15%"></iframe>

it Crops the unwanted part of the page , from left and top , but how do can i also crop the bottom and right part of the page ? So that i can get the page with all 4 sides cropped?

Umer
  • 183
  • 2
  • 16

2 Answers2

2

Use a container, flexbox and absolute positioning to reach a cross-browser compatible solution for this, sth like:

HTML:

<div id="iframe-container">
 <iframe></iframe><!-- Paste your iframe here -->
</div>

CSS:

#iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#iframe-container iframe {
  position: absolute;
  width: 120%;
  height: auto;
}

You may play with the width and height values in your CSS to change to cropping as you want. One should be a % - value, and the other one should be auto, to preserve the aspect ratio.

Additionally, you may move the iframe more specifically by using the top, left, bottom and right properties on the #iframe-container iframe element; indicating the distance of the iframe from the top, left, bottom and right border of the container, respectively. Use negative values for these to move the iframe outwards of the borders, and positive to move them inwards from the borders, in the according direction.

With this, you can pretty much place your iframe in whichever place + whichever cropping you may want.

DevelJoe
  • 856
  • 1
  • 10
  • 24
1

You can't stop all the iframe contents being rendered (i.e. it's not 'proper' cropping) but you can stop the user seeing it all (unless they dig around with dev tools) by using a clip-path on the iframe.

For example:

iframe {
  clip-path: polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%);
}

will show just the central 40% by 40% section of the iframe.

A Haworth
  • 30,908
  • 4
  • 11
  • 14