Cant halten den Platz Größe gleich - Bootstrap

Question

Ich habe einen einfachen quadratischen Block:

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

Und ich mache die Position mit der nächsten Klasse:

col-xs-6 col-sm-3 

Das Problem ist, wenn ich den Bildschirm machen kleiner in der Breite als in der Höhe. In dieser Situation wird das Quadrat zu einem Rechteck.

Es gibt eine Möglichkeit, die Proportionen des Quadrats beizubehalten, auch wenn ich die Größe der Höhe oder der Breite reduziere?

Answer 1

Dies ist, weil Sie nicht ein bestimmtes width zu Ihrem Platz haben, deshalb ist es ein Rechteck wird. Sehen Sie sich dieses Code-Snippet an.

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

<div class="coverw-block-welcome"></div>

Answer 2

Responsive Platz

.square { 
 
\t background-color: #1b6d85; 
 
\t position: relative; 
 
\t text-align: center; 
 
\t height: 27vh; 
 
\t width: 27vh; 
 
} 
 

 
.square:after { 
 
\t content: ""; 
 
\t display: block; 
 
\t padding-bottom: 100%; 
 
}

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

Answer 3

Sie sollten die Breite die gleiche wie Höhe angeben, um es proportional zu skalieren. Dieser Code sollte funktionieren.

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