时间戳

首页 > 解决方案 > 缩小窗口高度时如何自动缩小图像高度？

html - 缩小窗口高度时如何自动缩小图像高度？

问题描述

嗨，我有一个简单的例子。当高度不足以容纳图像时，如何在我的 flexbox 内实现自动缩小图像？

我必须像我的示例中那样做全屏应用程序，其中图像应以图像原始纵横比填充尽可能多的位置。当空间不够时（高度会变小）图像应该在他的高度开始缩小。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <style>
      body,
      html {
        height: 100%;
      }

      .cust-container {
        border: 4px solid red;
        max-height: 800px;
        height: 100%;
        width: 100%;
      }

      .cust-container img {
        max-height: 100%;
        width: auto;
        max-width: 100%;
      }

      .img-container {
        border: 4px solid green;
      }

      .left {
        background-color: yellow;
      }
    </style>
    <title>Static Template</title>
  </head>
  <body>
    <div class="cust-container">
      <div class="d-flex h-100">
        <div class="w-50 left"></div>
        <div class="right d-flex flex-column">
          <div class="img-container flex-grow-1">
            <img
              src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
              alt=""
            />
          </div>
          <button class="btn btn-success">
            hello
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

我的代码： https ://codesandbox.io/s/keen-tdd-952kv?file=/index.html

标签： htmlcss

解决方案

显式设置overflowflex child 的属性可以解决这个问题。

在您的示例中，需要设置元素的overflow属性。.img-container

虽然将该元素设置max-height为100vh适用于这个孤立的示例，但如果页面上有任何其他内容，它几乎肯定不是一个可行的解决方案。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <style>
      body,
      html {
        height: 100%;
      }

      .cust-container {
        border: 4px solid red;
        max-height: 800px;
        height: 100%;
        width: 100%;
      }

      .cust-container img {
        max-height: 100%;
        width: auto;
        max-width: 100%;
      }

      .img-container {
        border: 4px solid green;
        overflow: hidden; /* <-- */
      }

      .left {
        background-color: yellow;
      }
    </style>
    <title>Static Template</title>
  </head>
  <body>
    <div class="cust-container">
      <div class="d-flex h-100">
        <div class="w-50 left"></div>
        <div class="right d-flex flex-column">
          <div class="img-container flex-grow-1">
            <img
              src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
              alt=""
            />
          </div>
          <button class="btn btn-success">
            hello
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

推荐阅读