html - 垂直图像调整大小。 (Flex 或 VH)

标签 html css flexbox responsive-design


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

问题描述:

  • 当视口(viewport)宽度为 300 像素、视口(viewport)高度为 463 像素和更短时，所有元素都会填满整个屏幕，并且页面底部的内容开始被截断。

  • 528px 和 650px 高度也是如此。

  • (所以这告诉我它正在缩放到特定的纵横比(手机肖像到相对方形的纵横比。在风景纵横比下，图像变得大得离谱 - ...预期但不受欢迎))

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

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

Codepen: https://codepen.io/gold240sx/pen/eYVdGag (我可能建议打开开发工具以获得较薄的宽度，因为现在的设计实际上是针对纵向手机的。)

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

原件:

<!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;
    }

最佳答案

更新:

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

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

答案:

要实现此目标，您需要对代码进行以下更改:

(请注意，我使用省略号 ... 来指示我未更改的原始代码段，也是为了简洁起见。)

  1. 从正文选择器中删除 flex 属性，因为此处不需要它们。 .container div 包含页面上的所有内容。我还通过将 padding 和 margin 属性移至通用选择器规则集以及使用更简短的 overflow 声明来稍微清理正文规则集。

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

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

  2. 保留容器选择器中的 Flex 属性，并将其高度更改为 100vh 以占据屏幕的整个视口(viewport)。

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

  3. 将.images div 的高度设置为70vh，并将垂直和水平对齐设置为居中。 我还删除了 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 */
}

  4. 设置中心图像及其父 div 的最大宽度和高度(总计 100%)。此处也不需要 Flex 和定位属性，因为它们受到父 div 的影响(.images)。

    .mainImage {
    ...
    max-width: 60%;
    max-height: 60%;
    margin: 0 auto;
}

.secondaryImage {
    ...
    max-width: 60%;
    max-height: 40%;
    margin: 0 auto;
}

  5. 将图像的对象适合类型设置为contain。我还将元素从 spans 更改为 div 以更好地构建 html。这里的样式以前位于 span img 规则集中。将其样式复制到这个新规则集中并将其删除。

    .mainImage img,
.secondaryImage img {
    ...
    object-fit: contain;
}

  6. 将 .allButtons div 的高度设置为 30vh 以占据视口(viewport)的剩余高度。

    .allButtons {
    ... 
    height: 30vh;
    ...
}

  7. 减少较小屏幕尺寸上按钮的内边距以解决高度问题。我添加了媒体查询来调整大屏幕上的原始按钮大小。您可以随意将断点高度调整为您想要的任何值。

    button {
    ...
    padding: 10px;
    ...
}

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

HTML

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

关于html - 垂直图像调整大小。 (Flex 或 VH)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72221277/

上一篇：python - 在 Python 中变量后面使用括号有什么作用？

下一篇：ElasticSearch Spring - 使用 @Mapping 注释仅对一组字段禁用 date_detection，而不是对整个索引

相关文章：

html - Bootstrap 4 Split Navbar - 下方不在旁边的响应式下拉菜单

html - CSS 表格 100% 宽度，td 宽度

css - 如何使左右div固定而居中div可滚动

reactjs - 仅在有内容时才使 flex-item 荣誉宽度

java - 如何修复 Eclipse 上 HTML 文件中的错误？

javascript - JQuery - If ( $ ('#products' ).existOn.(document) ) == true {//这样做}

html - 填充高度元素内的滚动元素

css - 使用 flexbox 设置布局

html - 如何制作响应式png序列？

javascript - 单击面板外部不会关闭选择框

©2024 IT工具网  联系我们