我最近创建的JSFiddle包含一个基本布局，其中包含两侧显示内容的容器（一旦点击，它们就会翻转）。当我调整浏览器窗口的大小时，我希望所有内容都更大或更小（基本上是响应式的），而不会影响其间的空间或页面的总体布局。
问题：如何在保持切片宽高比的同时将内容扩展到浏览器窗口的 hight ？
经过几个小时的搜索，我仍然没有接近使内容响应，并希望寻求一些帮助。当然，还有一种方法。
@font-face { font-family: Century; src: url('GOTHIC.ttf'); }
body {
font-family: 'Muli', sans-serif;
background-color: rgb(51,51,51);
color: #fff;
padding:20px;
min-width:800px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 auto;
padding: 0;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h6 {
font-size: 15px;
}
.amarelo {
background:#DAA520;
}
.vermelho {
background:#CD0000;
}
.azul {
background:#4682B4;
}
.verde {
background-color: #2E8B57;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
cursor: default; /* Cursor normal instead of highlighter (i.e: I ) */
}
.all-rows {
width: auto;
height: auto;
}
.row {
width:auto;
padding-bottom:5px;
height:auto;
display:table;
}
/* Remove padding from last box in row / last row in all-rows */
.flip-container:last-child, .flip-container-small:last-child {
padding-right: 0px;
}
.row:last-child {
padding-bottom: 0px;
}
.row:first-child {
margin-top: 20px;
}
/* Flip Box Rules Below */
/* entire container, keeps perspective */
.flip-container {
width:225px;
height:110px;
}
.flip-container-small {
width:110px;
height:110px;
}
.flip-container, .flip-container-small {
perspective: 1000px;
float: left; /* Added to place on same line */
padding-right: 5px;
}
/* flip the pane when hovered */
.flip-container.hover .flipper, .flip-container-small.hover .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 1.5s;
transform-style: preserve-3d;
position: relative;
width: inherit;
height: inherit;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 2.5px;
/* Aligning Content in box centered */
display: flex;
flex-direction:column;
align-items: center;
justify-content:center;
text-align: center;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg); /* for firefox 31 */
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}<body class="noselect">
<h1>Responsive - Testing Interface</h1>
<div class="all-rows">
<!-- First Row Start -->
<div class="row">
<!-- First Box Start -->
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- First Box End -->
<!-- Second Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Second Box End -->
<!-- Third Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front verde">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back verde">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Third Box End -->
<!-- Fourth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front verde">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back verde">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fourth Box End -->
<!-- Fifth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front verde">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back verde">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fifth Box End -->
<!-- Sixth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front verde">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back verde">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Sixth Box End -->
</div>
<!-- First Row End -->
<!-- Second Row Start -->
<div class="row">
<!-- First Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- First Box End -->
<!-- Second Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Second Box End -->
<!-- Third Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Third Box End -->
<!-- Fourth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fourth Box End -->
<!-- Fifth Box Start -->
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fifth Box End -->
<!-- Sixth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Sixth Box End -->
</div>
<!-- Second Row End -->
<!-- Third Row Start -->
<div class="row">
<!-- First Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- First Box End -->
<!-- Second Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Second Box End -->
<!-- Third Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Third Box End -->
<!-- Fourth Box Start -->
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fourth Box End -->
<!-- Fifth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Fifth Box End -->
<!-- Sixth Box Start -->
<div class="flip-container-small" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front amarelo">
<!-- front content -->
<h2 id="24hrClock">1</h2>
<h4 id="longDate">2</h4>
</div>
<div class="back amarelo">
<!-- back content -->
<h2 id="12hrClock">3</h2>
<h4 id="shortDate">4</h4>
</div>
</div>
</div>
<!-- Sixth Box End -->
</div>
<!-- Third Row End -->
</div>
<p>I would like to have a second flip box with the smaller size of 110px x 110px right next to the first (not below).<br> NOTE: I want to reuse existing code from the large container, just with new dimensions, as the flipping principle is the same.</p>
</body>