如何让两张图片适合 html 中的任何屏幕尺寸？

Question

这是我第一次尝试写作 html 对于任何初学者的错误提前致歉。

我想在 desktop/laptop 和平板电脑浏览器 windows 中水平对齐放置 2 张大小相等的图像，然后一旦屏幕切换到移动设备 'portrait' 视图，我就想要这两个图像垂直对齐，但仍然完全可见（即不显示滚动条）。

通过将每个图像放在单独的 div 中并使用 flexbox，我已经很好地完成了第一部分。这两个 div 在容器 div 中。在此视图中，它们居中。一旦浏览器 window 变得太窄，第二张图片会按预期放置在第一张图片下方，但它会移出视野。我怎样才能确保调整图像大小以始终保持在视图中？

  <style type="text/css">    
    html, body {
      height: 100vh;
      min-height: 100vh;
    }

    .call-outs-container {
      min-height: 100vh;
      height:auto !important;
      height:100vh;
      overflow: hidden !important;
      max-width: 2800px;
    }

    .pics {
      padding:20px;
      box-sixing: border-box;
      margin-bottom: 20px;
      flex-basis: 50%;
    }
    img {
      max-width:100%;
      height:100%;
      object-fit:contain;
    }

    @media (min-width: 700px) {
      .call-outs-container {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
      }
    }
  </style>
</head>
<body>
  <main>
    <div class="call-outs-container">

      <div class = "pics">
        <img src="images/temp_spectra.jpeg" alt="Spectra Image" />
      </div>
      <div class = "pics">
        <img src="images/temp_sl.png" alt="Spectra Image" />
      </div>

    </div>
  </main>
</body>

以下请求 - 这是一个 JSFiddle。 https://jsfiddle.net/tullfan/t9hope6f/

Answer 1

希望您正在寻找这样的东西。做了一些改动。请检查一下。

html,
body {
  padding: 0;
}

.call-outs-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pics {
  height: 100%;
  width: 100%;
  /*margin: 0 10px; /* change margin as needed*/
  display: flex;
  justify-content: center;
}

img {
  margin: auto;
  height: auto;
  width: auto;
}

@media (min-width: 700px) {
  .call-outs-container {
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }
  img {
    margin: auto;
    height: 100%;
    width: 100%;
  }
}

<body>
  <main>
    <div class="call-outs-container">

      <div class="pics">
        <img src="https://via.placeholder.com/150" />
      </div>
      <div class="pics">
        <img src="https://via.placeholder.com/150" />
      </div>

    </div>
  </main>
</body>

Answer 2

我认为这可以解决您的问题。我做了一些改变。试试这个代码：

  img{
    width: 100%;
  }

  .call-outs-container{
    display: flex;
  }

  @media (max-width: 768px){
    .call-outs-container{
      display: block;
    }
  }

并且不要忘记在头部添加视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 3

您可以尝试使用 vw（视图宽度）和 vh（视图高度）的高度大小，让 2 张图片各占整个视图高度的 50%。要适应比例因子，只需将宽度设置为自动，浏览器会调整宽度，使比例因子相同：

img {
    height: 50vh;
    width: auto;
}

如何让两张图片适合 html 中的任何屏幕尺寸？

How do I get two images to fit any screen size in html?

html

css

resize

viewport

flexbox