Question

我有一个简单的方块：

.coverw-block-welcome{
  height: 27vh;
  background-color: #1b6d85;
  margin:5px;
  margin-top: 15px;
  border-radius: 4px 4px 4px !important;
}

我在下一堂课中担任该职位：

col-xs-6 col-sm-3

问题是当我将屏幕宽度设置为小于高度时。在那种情况下，正方形变成了一个矩形。

即使我减小了高度或宽度的大小，还是有办法保持正方形的比例吗？

Answer 1

响应广场

＆＃13;

.square { 
	background-color: #1b6d85;
	position: relative;
	text-align: center;
	height: 27vh;
	width: 27vh;
}

.square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

您应指定宽度与高度相同，以便按比例缩放。这段代码应该有用。

fswatch *.html | (while read; do ./dev.sh; done) 

fswatch index-static/*.js | (while read; do ./dev.sh; done) 

fswatch index-static/*.scss | (while read; do ./dev.sh; done)

Answer 3

这是因为您没有指定$result = [[], []]; $keys = array_keys($data); array_map(function($item) use(&$result, &$keys) { $key = array_shift($keys); $result[0][$key] = $item[0]; $result[1][$key] = $item[1]; }, $data);到您的方格，这就是它变成矩形的原因。看一下这段代码片段。

＆＃13;

width

＆＃13;

.coverw-block-welcome{
  height: 27vh;
  width: 27vh;
  background-color: #1b6d85;
  margin:5px;
  margin-top: 15px;
  border-radius: 4px 4px 4px !important;
}

＆＃13;

不能保持方形大小相等 - 引导

3 个答案: