如何在保持宽高比和相对于其他 div 的位置的同时垂直缩小 div？

Question

在HTML中，图片默认会保持纵横比，这使得在window时可以很容易地水平缩小图片并保持比例调整大小如下：

在 gif 中，请注意图像如何不仅保持纵横比而且保持在一起。它们不只是在自己的容器中变小。这是我想要完成的，但是是垂直的。（当 window 从底部拖到顶部时）。

这个简单演示的所有代码如下。目前，如果您将片段设为全屏并垂直缩小 window，所有内容都会像这样被剪裁：

我想将所有内容都保留在屏幕上，就像水平缩放时一样。我希望它以完全相同的方式运行，但是当 window 被缩放垂直 .

我试过给每个元素一个 auto 的宽度或者给它一个 display: inline-block 的值。有什么想法吗？

/* //////////////////////////// IMPORTS ////////////////////////// */
@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );

/* //////////////////////////// INITIAL ////////////////////////// */
body {
  max-width: 1024px;
  margin: auto;
  text-align: center;
}
img, footer {
  width: 100%;
}
html {
  height: 100%;
}
p {
  margin: 0;
}
.img-contr {
  width: 33.333%;
  float: left;
}

/* /////////////////////////// CORE CLASSES ////////////////////// */
.clr-fix::after {
  content: "";
  display: block;
  clear: both;
}
.v-cntr {
  position: relative;
  top: 50%;
  transform: translateY( -50% );
}

<head>
  <style>
    * { 
        box-sizing: border-box;
        overflow: hidden;
        outline: 1px solid #f00;
      }
  </style>
</head>
<body class="v-cntr">

  <!-- -------------------------- HEADER ------------------------ -->
  <header>
    <img src="http://svgshare.com/i/xH.svg" 
         alt="blue old fashioned car"
    >
  </header>

  <!-- --------------------------- MAIN ------------------------- -->
  <main class="clr-fix">
    <div class="img-contr">
      <img src="http://svgshare.com/i/xe.svg" alt="car key">
    </div>
    <div class="img-contr">
      <img src="http://svgshare.com/i/wz.svg" alt="seat belt">
    </div>
    <div class="img-contr">
      <img src="http://svgshare.com/i/vu.svg" alt="car pedals">
    </div>
  </main>

  <!-- -------------------------- FOOTER ------------------------ -->
  <footer>
    <p>footer</p>
  </footer>
</body>

EDIT 所以我制作了一个 gif，准确显示了我想要完成的任务。但我是通过截取我的网站并将整个内容制作成图像来实现的。目标是像在我的代码中一样对 div 中的多个图像执行此操作。这是我想要完成的：

本题：Vertically center image on page and maintain aspect ratio on resize 是一个图像的解决方案。当我在我的代码中尝试它时，图像会缩放但它们会分开。将每个图像设置为 max-height: 100% 根本无法解决。

Answer 1

好的。因此，在 vmin 单位和 aspect ratio media queries 的帮助下，我能够将最适合我的东西放在一起作为这个问题的解决方案：

/* ///////////////////////////////// IMPORTS /////////////////////////////// */
@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );

/* ///////////////////////////////// INITIAL /////////////////////////////// */
* {
  box-sizing: border-box;
  overflow: hidden;
}
html {
  height: 100%;
  background-color: #fff;
}
html, body {
  padding: 0.5%;
}
body {
  max-width: 1000px;
  background-color: #eee;
}
body, .top-contr {
  margin: auto;
}
p {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #aaa;
}

/* ///////////////////////////////// STRUCTURE ///////////////////////////// */

/* / / / / / / / / / / / / / / / / / / HEADER / / / / / / / / / / / / / / / /*/
header, footer, main .top-contr {
  padding: 1%;
}
header .top-contr {
  background-color: #ddd;
  padding: 15%;
}
.top-contr, .v-cntr, .v-cntr-a {
  position: relative;
}
.cnt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* / / / / / / / / / / / / / / / / / / MAIN / / / / / / / / / / / / / / / / /*/
main .top-contr {
  width: 33.333%;
  float: left;
}
main .mid-contr {
  background-color: #ccc;
  padding: 45%;
}
main .cnt {
  padding: 4%;
}

/* / / / / / / / / / / / / / / / / / / FOOTER / / / / / / / / / / / / / / / /*/
footer .top-contr {
  background-color: #bbb;
  padding: 5%;
}

/* //////////////////////////////// CORE CLASSES /////////////////////////// */
.clr-fix::after {
  content: "";
  display: block;
  clear: both;
}
.v-cntr {
  top: 50%;
  transform: translateY( -50% );
}

/* /////////////////////////////// MEDIA QUERIES /////////////////////////// */
@media ( min-aspect-ratio: 3/2 ) {
  body {
    width: 135vmin;
    height: 100vmin;
  }
}
@media ( min-aspect-ratio: 3/2 ) and ( min-width: 1000px ) {
  .v-cntr-a {
    top: 50%;
    transform: translateY( -50% );
  }
}

<body class="v-cntr">                  <!-- << v-cntr = vertically center -->
  <div class="wrapper v-cntr-a">
  
    <!-- ----------------------------- HEADER --------------------------- -->
    <header>
      <div class="top-contr">                   <!-- << contr = container -->
        <div class="cnt">                           <!-- << cnt = content -->
          <p class="v-cntr">header</p>
        </div>
      </div>
    </header>

    <!-- ------------------------------ MAIN ---------------------------- -->
    <main>
      <div class="top-contr">
        <div class="mid-contr">
          <div class="cnt">
            <p class="v-cntr">rectangle 1</p>
          </div>
        </div>
      </div>
      <div class="top-contr">
        <div class="mid-contr">
          <div class="cnt">
            <p class="v-cntr">rectangle 2</p>
          </div>
        </div>
      </div>
      <div class="top-contr">
        <div class="mid-contr">
          <div class="cnt">
            <p class="v-cntr">rectangle 3</p>
          </div>
        </div>
      </div>
    </main>

    <!-- ----------------------------- FOOTER --------------------------- -->
    <footer>
      <div class="top-contr">
        <div class="cnt">
          <p class="v-cntr">footer</p>
        </div>
      </div>
    </footer>
  </div>
</body>

同时在此处查看已接受的答案：

如何在保持宽高比和相对于其他 div 的位置的同时垂直缩小 div？

How to shrink divs vertically while keeping aspect ratio and location relative to other divs?

html

css

resize

viewport

responsive