在 HTML 中，图像倾向于默认保持其宽高比，这使得在水平方向缩小图像并在调整窗口大小时保持比例变得很容易，如下所示:
在 gif 中，请注意图像如何不仅保持纵横比而且保持在一起。它们不只是在自己的容器中变小。这是我想要完成的，但是是垂直的。 (当窗口从下往上拖动时)。
这个简单演示的所有代码都在下面。目前，如果您将代码片段全屏显示并垂直缩小窗口，所有内容都会像这样被剪裁:
我想将所有内容都保留在屏幕上，就像水平缩放时一样。我希望它以完全相同的方式运行，但是当窗口垂直缩放时。
我试过为每个元素赋予宽度 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>编辑 所以我制作了一个 gif 来准确显示我想要完成的事情。但我是通过截取我的网站并将整个内容制作成图像来实现的。目标是像在我的代码中一样对 div 中的多个图像执行此操作。这是我想要完成的:
本题:Vertically center image on page and maintain aspect ratio on resize
是一个图像的解决方案。当我在我的代码中尝试它时，图像会缩放但它们会分开。将每张图片都设置为 max-height: 100% 根本无法解决。
最佳答案
好的。所以借助 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>关于html - 如何在保持宽高比和相对于其他 div 的位置的同时垂直缩小 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42755635/