css - 有一个响应式屏幕，两张图片占据 50% 的高度

Question

我有两张图片应该占据两个屏幕的一半，但我的第二张图片显示不正确。

我已经使用了所有可能的方法，但它就是不来。

HTML 部分:

<section id="genderSelection">
  <div id="yuko">
      <img class="image-gender" ng-click='genderController.onGirlClicked()'
        src="app/app_resources/icons/yuko.png">
  </div>
  <div id="cody"
        ng-click='genderController.onGuyClicked()'>
    <img class="image-gender"
      src="app/app_resources/icons/cody.png">
  </div>
</section>

我的 CSS:

.image-gender {
  width: 100%;
    max-width: 100%;
}

section {
    width: auto;
    height: 100%;
    margin: auto;
    padding: 0;
    overflow: auto;
}

div#yuko {
    width: 100%;
    height: 50%;
    max-height: 50%;
    max-width: 100%;
    display: inline-block;
}

div#cody {
    width: 100%;
    height: 50%;
    max-width: 100%;
    display: inline-block;
}

编辑:问题是在我的正文中，其他部分使用了 overflow:hidden 标签。删除我可以在滚动时看到第二个图像。但情况是 UX 不好，因为两个图像不是固定的并且可以滚动。有什么解决办法吗？我希望图像具有按钮的感觉。

Answer 1

这是解决方案。我在您的代码中使用了虚拟图像。使用您要求的示例改进代码，这也不会拉伸(stretch)图像。

body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.CommonArea {
  text-align: center;
  position: relative;
  flex-basis: 50%;
}

div#yuko {
  background: #FF73AB;
}

div#cody {
  background: #00BDD3;
}

.image-gender {
  width: 200px;
  position: absolute;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

/* Responsive Css For Mobile Devices*/
@media (max-width:767px) {
  .image-gender {
    margin-top: -40px;
    margin-left: -40px;
    width: 80px;
  }
}

<section id="genderSelection">
  <div id="yuko" class="CommonArea" ng-click='genderController.onGirlClicked()'>
    <img class="image-gender" src="/image/pWVIY.png">
  </div>
  <div id="cody" class="CommonArea" ng-click='genderController.onGuyClicked()'>
    <img class="image-gender" src="/image/wPBPZ.png">
  </div>

</section>