如何在保持纵横比和相对于其他 div 的位置的同时垂直缩小 div？
左旋
在HTML中，图像默认情况下倾向于保持其长宽比，这使得在将窗口调整大小时像这样轻松地水平缩小图像并保持比例是很容易的：
在 gif 中，请注意图像如何不仅保持纵横比，而且还保持在一起。它们不仅仅在自己的容器中变小。这就是我想要完成的，但垂直的。（当窗口从下到上拖动时）。
这个简单演示的所有代码都在下面。目前，如果您使代码片段全屏并垂直缩小窗口，则所有内容都会像这样被裁剪：
I want to keep everything on screen just like when it scales horizontally. I want it to behave in exactly the same way, but when the window is scaled vertically.
I've tried giving every element a width of auto or giving it a value of display: inline-block. Any ideas?
/* //////////////////////////// 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 So I a made gif showing exactly what I want to accomplish. But I made it by screenshotting my website and making the whole thing an image. The goal is to do this with multiple images inside divs like inside my code. Here is what I want to accomplish:
This question: Vertically center image on page and maintain aspect ratio on resize is a solution for one image. When I try it in my code the images scale but they separate. Setting every image to max-height: 100% doesn't solve at all.
左旋
好的。因此，在vmin单位和纵横比媒体查询的帮助下，我能够将一些反映最适合我的内容作为解决此问题的方法：
/* ///////////////////////////////// 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>Aslo 在这里看到接受的答案：https ://stackoverflow.com/questions/42757168/how-to-keep-aspect-ratio-on-a-vertically-scaling-div-not-image?noredirect =1& lq =1
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何相对于其他div定位绝对div
- 2
如何相对于固定位置div定位div？
- 3
CSS div相对于其他div的定位
- 4
CSS div相对于其他div的定位
- 5
如何将clipPath应用于div位置相对于div位置的div
- 6
如何使这个div相对于主容器的位置
- 7
绝对相对于div的位置图片
- 8
相对于yOffset位置淡出div
- 9
如何在jQuery中单击按钮时显示相对于按钮位置的div
- 10
图像相对于div中的div的位置
- 11
图像相对于div中的div的位置
- 12
如何相对于div在div的任一侧垂直居中两个跨度？
- 13
更改高度后如何调整div相对于其上方的div的位置？
- 14
如何基于其相对于另一个div的位置更新div
- 15
更改高度后，如何调整div相对于其上方的div的位置？
- 16
jQuery如何设置div相对于另一个div的位置？
- 17
Javascript，游戏，如何确定javascript中div元素相对于父div的位置（x，y）？
- 18
将左侧 div 垂直居中，同时保持右侧 div 标准
- 19
如何使用jQuery和jQuery UI保持div相对于可调整大小的div的宽度？
- 20
CSS3推入div相对于其他div的移动
- 21
如何相对于图片定位div？
- 22
如何相对于图片定位div？
- 23
如何在保持相对位置而不使用float的同时并排放置这些div？
- 24
子div的绝对位置不是相对于父
- 25
显示相对于其父顶部位置的div
- 26
获取可拖动对象相对于div的位置
- 27
相对于高度为100％的图像的比例和位置div
- 28
如何使页脚<div>相对于可缩放内容<div>？
- 29
如何相对于其中的div制作可拉伸的div
我来说两句