Css 具有响应屏幕，两幅图像占据50%的高度

我有两个图像，应该占两个屏幕的一半，但我的第二个图像没有正常显示

我用尽了一切可能的办法，但它就是不来

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>

---

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

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

身体 html{ 宽度：100%； 身高：100%； 边际：0px； 填充：0px； } 部分{ 显示器：flex； 弯曲方向：立柱； 身高：100%； } .公共区域{ 文本对齐：居中； 位置：相对位置； 弹性基准：50%； } 迪维尤科{ 背景：FF73AB； } 迪夫科迪{ 背景：00BDD3； } .形象性别{ 宽度：200px； 位置：绝对位置； 最高：50%； 利润上限：-100px； 左边距：-100px； } /*移动设备的响应式Css*/ @介质最大宽度：767px{ .形象性别{ 利润上限：-40px； 左边距：-40px； 宽度：80px； } } 试试这个

.image-gender {
    width: 100%;
    height: 100%;
    display: block;
}

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

#yuko, #cody {
    width: 100%;
    height: 50%;
}

您可以使用flex属性，尽管flex标记的子元素不应该有页边距顶部或页边距底部，以避免滚动条。 /*这是一个获取整页高度的快速示例，可以在代码中省略*/ html， 身体{ /*盒子模型*/ 身高：100%； } 身体{ /*盒子模型*/ 显示器：flex； 弯曲方向：立柱； } 身体 一 两个{ /*盒子模型*/ 边际上限：0； 页边距底部：0； } 一 两个{ /*盒子模型*/ 弹性基准：50%； } 一个{ /*视觉的*/ 背景颜色：卡其色； } 两个{ /*视觉的*/ 背景颜色：白肋木； }

这是第一段

这是第二段

---

嗨，谢谢你的回答。问题是，在我的body标签overflow:hidden中，其他部分使用了它。删除，我可以看到第二个图像，而滚动。但情况是，用户体验并不好，因为这两个图像不是固定的，并且是可滚动的。有什么解决办法吗？我希望图像有按钮的感觉如果你想删除滚动条，当我看到你的图像时，你可以将粉色和天蓝色作为背景色，然后放置女孩和男孩的图像。。

.image-gender {
    width: 100%;
    height: 100%;
    display: block;
}

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

#yuko, #cody {
    width: 100%;
    height: 50%;
}