垂直图像调整大小。（弹性或 vh）

Question

嘿！谢谢阅读！我有一个网络应用程序登录屏幕。我专注于创建一个类似应用程序的响应式登录页面。（无滚动等）

问题描述：

如果视口宽度为 300 像素，在 463 像素和更短的视口高度下，所有项目都会填满整个屏幕，页面底部的内容开始被截断。
528px 和 650px 高度也是如此。
（所以这告诉我它正在缩放到特定的纵横比（phone 纵向到相对方形的纵横比。在横向纵横比下，图像变得大得离谱 - ...预期但不希望))

目标： 相反，我只是希望图像在视口高度更改时缩小高度并保持其纵横比。（以支持 flex-grow/shrink 提供的纵横比），而不是溢出并改变该纵横比。

注意：对于那些想要更简单示例的人：我认为该示例相对简单。它可以更简单吗？是的，最有可能。不过，我并不完全确定我会让什么变得更简单。

Codepen: https://codepen.io/gold240sx/pen/eYVdGag（我可能会建议打开 devtools 以获得较窄的宽度，因为现在的设计确实适合纵向 phone秒）

复制并粘贴到您喜欢的任何编辑器中要容易得多。

原版：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
    * {
        box-sizing: border-box;
    }

    body {
        height:100%; 
        width: 100%; 
        padding: 0; 
        margin: 0; 
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .container {
        background-color: rgb(162, 162, 162);
        display: flex;
        flex-direction: column;
        min-height: fit-content;
        height: 100%;
    }
    .images{
        background-color: aqua; 
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%; 
        flex-grow: 3;
        flex-shrink: 3;
    }

    span img {
        max-width: 100%;
        max-height: 100%;
    }
    .mainImage {
        background-color: rgb(128, 248, 0);
        display: flex;
        max-width: 70%;
        max-height: 100%;

        margin-left: auto;
        margin-right: auto;
    }
    .secondaryImage{
        background-color: rgb(133, 201, 153);
        max-width: 90%;
        position: relative;
        width: auto;

        margin-left: auto;
        margin-right: auto;
    }

    .allButtons {
        background-color: rgb(255, 132, 0);
        display: flex;
        flex-direction: column;
        border: 2px red solid;
        flex-grow: 2;
        flex-shrink: 2;
    }

    .mainButtons{
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: space-evenly;

        background-color: rgb(249, 149, 0);
        padding: 5px 0px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 100%;
    }

    button {
        background-color: rgb(205, 205, 0);
        border: black solid 2px;
        border-radius: 5px;
        width: 100%;
        color: white;
        padding: 20px;
        display: block;
    }


    .bottomButtonContainer {
        width: 100%;
        display: flex; 
        align-items: center;
        justify-content: end;
        margin-top: auto;
    }

    .bottomButton {
        background-color: rgb(101, 103, 0);
        border-radius: 5px 5px 0px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 40px;
    }


 </style>
</head>
<body>
    <div class="container">
     <div class="images" style="background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
      <span class="mainImage">
       <img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
      </span>
      <span class="secondaryImage">
       <img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
      </span>
    </div>
    <div class="allButtons">
     <div class="mainButtons">
      <button>SIGNUP!</button>
      <button>LOGIN!</button>
     </div>
      <div class="bottomButtonContainer">
       <button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
      </div>
    </div>
</div>

已更新 CSS（粗略地基于 Chizaram 提供的初始答案）- 已实现图像比例 - 图像纵横比尚未保证 -:

        }
    * {
        box-sizing: border-box;
        padding: 0; 
        margin: 0; 
    }

    body {
        height:100%; 
        width: 100%; 
        overflow: hidden;
    }

    .container {
        background-color: rgb(162, 162, 162);
        display: flex;
        flex-direction: column;
        min-height: fit-content;
        height: 100vh;
    }

    .images{
        background-color: aqua;
        height: 70vh; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mainImage img,
    .secondaryImage img {
        max-height: 100%;
        max-width: 100%;
    }

    .mainImage {
        background-color: rgb(128, 248, 0);
        max-height: 60vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .secondaryImage{
        background-color: rgb(133, 201, 153);
        min-height: 30%;
        max-width: 90vw;
        max-height: 40%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .allButtons {
        display: flex;
        flex-direction: column;
        border: 2px red solid;
        height: 30vh;
    }

    .mainButtons{
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: space-evenly;
        /* background-color: rgb(249, 149, 0); */
        padding: 5px 0px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 100%;
    }

    button {
        background-color: rgb(205, 205, 0);
        border: black solid 2px;
        border-radius: 5px;
        width: 100%;
        color: white;
        padding: 10px;
        display: block;
    }


    .bottomButtonContainer {
        width: 100%;
        display: flex; 
        align-items: center;
        justify-content: end;
        margin-top: auto;
    }

    .bottomButton {
        background-color: rgb(101, 103, 0);
        border-radius: 5px 5px 0px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 40px;
    }

Answer 1

更新：

不要忘记删除您在 .images div 中声明的旧内联样式，这样它们就不会恢复到以前的样式：

<div class="images">...</div> <!-- Remove old inline styles -->

答案：

为此，您需要对代码进行以下更改：

（请注意，我使用省略号 ... 来表示我没有更改的原始代码段，也是为了简洁。）

从 body 选择器中删除 flex 属性，因为它们在这里不是必需的。 .container div 包含页面上的所有内容。我还通过将 padding 和 margin 属性移动到通用选择器 rule-set 以及使用更简短的 overflow 声明来稍微清理主体 rule-set。
```
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
```

在容器选择器中保留 flex 属性并将其高度更改为 100vh 以占据屏幕的整个视口。

.container {
        background-color: rgb(162, 162, 162);
        display: flex;
        flex-direction: column;
        min-height: fit-content;
        height: 100vh;
    }

给 .images div 高度 70vh 并将垂直和水平对齐设置为center. 我还删除了 flex-grow 和 flex-shrink 属性，因为它们不是获得所需结果所必需的。

.images {
    ...
    height: 70vh;
    display: flex;
    flex-direction: column; 
    justify-content: center; /* Vertical alignment in column flex-direction */ 
    align-items: center; /* Horizontal alignment in column flex-direction */
}

设置中心图像及其父图像的最大宽度和高度 divs（总计 100%）。 Flex 和定位属性不是这里也是必要的，因为它们受其父 div (.images).
的影响
```
.mainImage {
    ...
    max-width: 60%;
    max-height: 60%;
    margin: 0 auto;
}

.secondaryImage {
    ...
    max-width: 60%;
    max-height: 40%;
    margin: 0 auto;
}
```
将图像的 object-fit 类型设置为 contain。我还将元素从 spans 更改为 divs 以更好地构建 html。此处的样式以前在 span img rule-set 内。在这个新的 rule-set 中复制它的样式并删除它。
```
.mainImage img,
.secondaryImage img {
    ...
    object-fit: contain;
}  
```
将.allButtonsdiv的高度设置为30vh，占据视口的剩余高度
```
.allButtons {
    ... 
    height: 30vh;
    ...
}
```
在较小的屏幕尺寸上减少按钮的填充 以解决高度问题。我添加了一个媒体查询以在大屏幕上调整为原始按钮大小。随意将断点高度调整为您想要的任何值。
```
button {
    ...
    padding: 10px;
    ...
}

@media screen and (min-height: 620px) {
    button {
        padding: 20px;
    }
}
```

HTML

   <div class="mainImage">
     ...
   </div>
   <div class="secondaryImage">
     ...
   </div>

Answer 2

我觉得我有！！肖像和风景。当然，因为使用了vh/vw，所以可能有问题mobile-browserheader吧。 :/ 也许有一些 Hacky 方法可以修复。但是是的，到目前为止这看起来不错。我必须在移动设备上进行测试才能看得更清楚。 Galaxy fold 它似乎从底部切掉了一点（只有几像素。）此外，我把所有这些 CSS 并包装到媒体屏幕本身，然后过渡到一个可滚动的网页......或者可能不是。不管怎样，这是代码... 谢谢 Chizaram 的帮助！如果你愿意，我会在发薪日给你买一张礼品卡！

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webApp</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0; 
            margin: 0; 
        }

        body {
            height:100%; 
            width: 100%; 
            overflow: hidden;
        }

        .container {
            background-color: rgb(162, 162, 162);
            display: flex;
            flex-direction: column;
            min-height: fit-content;
            height: 100vh;
        }

        .images{
            background-color: aqua;
            flex-grow: 1; 
            flex-shrink: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        
        }

        .mainImage img,
        .secondaryImage img {
            object-fit: contain;
            display: flex;
            justify-self: center;
        }

    .mainImage img {
        max-height: 25vh;
    }

    .secondaryImage img {
        max-height: 20vh;
        width: 100%;
        max-width: 90vw;
    }

    .mainImage {
        background-color: rgb(128, 248, 0);
        max-height: 60vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        object-fit: contain;
    }

    .secondaryImage{
        background-color: rgb(133, 201, 153);
        min-height: 30%;
        width: 90vw;
        max-height: 40%;
        margin: 0 auto;
        display: grid;
        align-content: center;
        object-fit: contain;
    }

    .allButtons {
        display: flex;
        flex-direction: column;
        border: 2px red solid;
        height: 30vh;
        flex-grow: 2; 
        flex-shrink: 1;
    }

    .mainButtons{
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: space-evenly;
        /* background-color: rgb(249, 149, 0); */
        padding: 5px 0px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 100%;
    }

    button {
        background-color: rgb(205, 205, 0);
        border: black solid 2px;
        border-radius: 5px;
        width: 100%;
        color: white;
        padding: 2em;
        display: block;
        min-width: fit-content;
    }


    .bottomButtonContainer {
        width: 100%;
        display: flex; 
        align-items: center;
        justify-content: end;
        margin-top: auto;
    }

    .bottomButton {
        background-color: rgb(101, 103, 0);
        border-radius: 5px 5px 0px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 40px;
    }

    @media only screen
    and (max-device-width: 1023px)
    /* and (min-device-pixel-ratio : 2.0) */
    and (orientation: landscape) {

        button {
            padding: 1em;
        }

    }
    </style>
</head>

<body>
    <div class="container">
        <div class="images">
            <span class="mainImage">
                <img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
            </span>
            <span class="secondaryImage">
                <img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
            </span>
        </div>
        <div class="allButtons">
            <div class="mainButtons">
                <button>SIGNUP!</button>
                <button>LOGIN!</button>
            </div>
            <div class="bottomButtonContainer">
                <button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
            </div>
        </div>
    </div>
</body> 
</html>

垂直图像调整大小。（弹性或 vh）

Vertical image Resize. (Flex or vh)

html

css

flexbox

responsive-design

垂直图像调整大小。 （弹性或 vh）

Vertical image Resize. (Flex or vh)

html

css

flexbox

responsive-design

垂直图像调整大小。（弹性或 vh）