Question

情况：我在图像下方有一个图像和两个按钮，所有这些按钮的宽度相同。

问题：如果视口水平太长，则无法向下滚动就看不到按钮。这是平板电脑和小型笔记本电脑的问题。我目前的CSS看起来像这样：

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


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

我试图找到一种方法，使用媒体查询或其他方法将按钮和图像缩小到可以在不滚动任何尺寸设备的情况下看到两者的尺寸。

举一个问题的例子有点困难。在下方查看，然后将视口缩小到较窄的高度和较宽的宽度，您应该看到只能看到图像并且必须滚动才能查看按钮。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

使用max-height: 50vh，这意味着它将占据显示屏幕的50％。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为使用媒体查询是解决问题的正确方法。您需要为关键视口上的图像定义另一个图像大小（尤其是最大宽度）。

但您也可以使用视口单元来定义图像的大小。现在你已经设置了一个固定的最大宽度，但是没有考虑视口的大小。您可以将其设置为视口高度的50％，并相应地更改其他值：

 .image{
        max-height: 50vh;
    }

您也可以将两种解决方案结合起来。

媒体查询高度

2 个答案: