Question

我的index.php上有一个div，其中包含我所有其他php页面的iframe。我想要的是水平和垂直缩放div，并保持内容成比例。使用img很容易，但我无法通过div或iframe来解决这个问题。

我不知道这之前是否已经解决了这个问题，如果是这样的话，我已经找不到它了，而且我已经很久没遇到它了。然后我突然找到了一个可行的解决方案：

https://codepen.io/thebabydino/pen/MajxzY?editors=110

所以我想要这篇文章，只是与其他人分享，他们有同样的问题。

＆＃13;

#master
{
position: absolute;
margin: 0% auto;
padding: 0 auto;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
background: #000000;
}


.slide
{
position: absolute;
padding: 0 auto;
left: 0%;
top: 0%;
left: calc(50vw - 89vh);
width: 177.7777777777vh;
height: 100%;
overflow: hidden;
background: #000000;
}


@media (max-aspect-ratio: 16 / 9)
{
	.slide
	{
	left: 0%;
	top: calc(50vh - 37.5vw);
	width: 100vw;
	height: 100vh;
	}
}

＆＃13;

<body>


<div id="master">
	<div id="iframe_site" class='slide'>
		<iframe id="iframe_master" src="http://www.mrles.dk/test_2.php" name="iframe_master" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
	</div>
</div>

</body>

＆＃13;

解决方案 - 缩放和居中iframe水平和垂直比例

0 个答案: