Question

不确定我是否必须使用iframe，CSS或如何使用，但我想要做的是将网页显示为正方形。要使高度为％100，但宽度必须与高度，使它成为一个正方形。

Answer 1

您可以使用vh（视口高度）。如果您想要居中，请添加margin: auto;。

＆＃13;

body {
  margin: 0;
}
.square {
  background: pink;
  height: 100vh;
  width: 100vh;
  margin: auto;
}

＆＃13;

<div class="square"></div>

＆＃13;

Answer 2

HTML

    <script
  src="https://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
<iframe id="square" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6225.402678457221!2d35.47883967506326!3d38.72466541839045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x152b121b553844bb%3A0x127fda1b7d9790b2!2sGevhernesibe%2C+38010+Kocasinan%2FKayseri!5e0!3m2!1str!2str!4v1484265875494" width="600" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>

JS

   $(document).ready(function() {

$("#square").attr("width",$("#square").height());

});

在html文档中的任何地方。

<script>
  $(document).ready(function() {

$("#square").attr("width",$("#square").height());

});
</script>

Answer 3

以下是仅限CSS的解决方案：

将iframe包装在div容器中。使用pseudo-element填充技巧使这个div容器正方形。将iframe绝对放在此容器中。最重要的是，此解决方案响应，并且需要 no js 。

.iframe-container {
  position: relative;
  display: inline-block;
  width: 50%;
}

.iframe-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Codepen：http://codepen.io/anon/pen/LxZPyy

如何将网页显示为正方形？

3 个答案: