'Rescaling content within an iFrame

I have an iframe, which takes another page and displays it. However, the content within this iFrame becomes unreadable if I move from a external computer monitor to a Macbook screen for example. I'm unsure about CSS and what I've tried so far has failed to address the issue. What should I be delving into to find a solution here?

 <template>
  <div
    class="case-file-view-wrapper"
  >
    <iframe
      width="100%"
      height="800px"
      :src="this.iframeUrl"
      @load="loadfinished"
      scrolling="yes"
      class='case-file-frame'
    >
    </iframe>
  </div>
</template>


<style lang="scss">
  .case-file-view-wrapper {
    position: relative;
    width: 100%;
  }

  .case-file-frame {
    zoom: 0.71;
    -moz-transform: scale(0.71);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.71);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.71);
    -webkit-transform-origin: 0 0;
  }

  .in-attachments-preview {
    overflow: scroll;
    background-color: white;
    .case-file-frame {
      min-width: 1500px;
      // position: fixed;
      // bottom: 0px;
      // height: 40%;
    }
  }

</style>
htmlcssiframevuejs2


Solution 1:[1]

Maybe try:

.background_video {
width: 100vw;
height: 100vh;
overhang: hidden;}
<div class="background_video">
<iframe
  width="100%"
  height="800px"
  :src="this.iframeUrl"
  @load="loadfinished"
  scrolling="yes"
  class='case-file-frame'
>
</iframe>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ethan

Related Questions