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

Question

不知道我是否必须使用iframe，CSS或如何，但我想要做的是将网页显示为square.To有高度为％100，但宽度为相同的高度大小，这是一个正方形。

Answer 1

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

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

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

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的解决方案：

包裹在一个div容器中的iframe中。使用pseudo-element填充技巧制作这个div容器。把iframe放在这个容器里面。最好的解决方案是响应和要求没有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