設置高度與寬度

可以說我有一個div設置高度與寬度

div { 
 
    float: left; 
 
    width: 447px; 
 
    height: 447px; 
 
    background-color: blue; 
 
    margin-left: 1.3%; 
 
    margin-top: 1.3%; 
 
    max-width: 23.4%; 
 
    max-height: 47%; 
 
}

<div></div>

在div爲盒狀，它具有相同的寬度和高度。但隨着瀏覽器不斷調整大小和屏幕越來越小，由於最大寬度和最大高度設置爲％值，我不必使用媒體查詢，但寬度和高度之間的比率變得越來越不同。因此，我們可以說屏幕尺寸是1440x900，寬度和高度的計算將會不同，並且箱形將被破壞爲矩形。

有沒有辦法如何保持div盒形狀而不使用額外的媒體查詢？

來源

2016-05-12 Darlyn

[谷歌框方形的CSS左右（https://spin.atomicobject.com/2015/07/14/css-responsive-square/） – GolezTrol

您可以使用視單位並設置height和width以相同vw例如。

div{ 
 
    width: 40vw; 
 
    height: 40vw; 
 
    background-color: blue; 
 
}

<div></div>

太保持方形屏幕邊界之內，你可以在vh單位

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div{ 
 
    width: 60vw; 
 
    height: 60vw; 
 
    max-height: 100vh; 
 
    max-width: 100vh; 
 
    background-color: blue; 
 
}

<div></div>

來源

2016-05-12 20:57:11

這將保持它的平方，但如果這是必要的，則不在屏幕邊界內。 – GolezTrol

如果需要的話，你總是可以使用'40vmin'。 –

視窗單元的選擇幾乎是UNIVERS添加max-height和max-width盟友支持在這一點上。

http://caniuse.com/#feat=viewport-units

但是，您也可以使用javascript/JQuery。

function onResize() { 
    var el = $('#element'); 
    el.height(el.width()); 
} 
$(window).resize(onResize); 
$(document).ready(onResize);

注意，你的問題肯定是重複的。

來源

2016-05-12 20:59:18 abalter

div{ 
 
    width: 40vmin; 
 
    height: 40vmin; 
 
    background-color: blue; 
 
    display: inline-block; 
 
} 
 
div+div { background-color: green; }

<div></div><div></div>

來源

2016-05-12 21:03:19

在一個場景中，其中多個div在行中，它破壞了整個定位。 – Darlyn

@trolkura我不知道你的意思是破壞定位。它的工作原理應該如何。如果你想要它們並排使用'display：inline-block'。顯示該答案的更新。 –

設置高度與寬度

回答

相關問題