Greetings, fellow internet users!
I'm currently facing a challenge involving displaying a website within an iframe. My goal is to have the iframe show the entire screen of the website without any scrollbars. So far, the only solution I've found is to adjust the size of the container.
My question is: Can I achieve this effect by simply zooming out on the iframe?
I hope my explanation is clear enough for you to understand the issue at hand.
.gridgames {
height: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 10px;
margin: 2rem;
}
.game {
display: flex;
flex-direction: column;
width: 100%;
height: 20rem;
margin: auto;
background-color: green;
transition: 150ms;
}
.game:hover {
transform: scale(1.1);
}
iframe {
width: 100%;
height: 100%;
border: none;
overflow: hidden;
} <section class="gridgames">
<div class="game"><iframe src="https://barneslow.com/"></iframe></div>
<div class="game">Sample Game</div>
<div class="game">Sample Game</div>
<div class="game">Sample Game</div>
<div class="game">Sample Game</div>
<div class="game">Sample Game</div>
</section>I included some code snippets above to help illustrate my dilemma.
Could anybody shed light on whether it's feasible to "zoom out" on the iframe in this scenario?