javascript - 带高度的媒体查询

Question

情况:我有一个图像和图像下方的两个按钮，它们的宽度都相同。

问题:如果视口(viewport)水平方向太长，则不向下滚动就看不到按钮。这是平板电脑和小型笔记本电脑的问题。我当前的 CSS 如下所示:

 .image{
        width:90%;
        height: 50%;
        max-width: 500px;
        max-height: 250px;
        margin-bottom: 10px;
    }


    .buttonAnswer{
        width: 90%;
        max-width: 500px;
        font-size: 25px;

我正在尝试使用媒体查询或其他方式找到一种方法，将按钮和图像缩小到无需在任何尺寸的设备上滚动即可看到的大小。

举个例子有点难。查看下方，然后将视口(viewport)缩小到窄高和长宽，您应该看到您只能看到图像并且必须滚动才能查看按钮。

  .image {
  width: 90%;
  height: 50%;
  max-width: 500px;
  max-height: 250px;
  margin-bottom: 10px;
}

.buttonAnswer {
  width: 90%;
  max-width: 500px;
  font-size: 25px;

<img class='image center-block' id='image2' src='https://i.imgur.com/AMTXZ2R.jpg' alt="Girl trying to get a job">
<button id='stepOneYes2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer buttonSpace'> Yes </button>
<button id='stepOneNo2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer'> No </button>

Answer 1

使用 max-height: 50vh 这意味着它会占据显示它的任何屏幕的 50%。

@media (min-width: 970px) {
  .outer {
    height: 100%;
    min-width: 100%;
  }
  .image {
    max-width: 100%;
    height: auto;
    max-height: 50vh;
  }
  .buttonAnswer {
    width: 90%;
    font-size: 25px;
  }
}

@media (max-width: 970px) {
  .outer {
    height: 100%;
    min-width: 100%;
  }
  .image {
    width: 90%;
    height: auto;
    max-height: 50vh;
  }
  .buttonAnswer {
    width: 90%;
    font-size: 25px;
  }
}

<div class="outer">
  <p style="text-align:center"><img class='image center-block' id='image2' src='https://i.imgur.com/AMTXZ2R.jpg' alt="Girl trying to get a job"></p>
  <button id='stepOneYes2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer buttonSpace'> Yes </button>
  <button id='stepOneNo2' type="button" class='buttonsQuestion2 btn btn-info center-block buttonAnswer'> No </button>
</div>