Question

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

我已经尽可能地使用了一切，但它不会来。

HTML PART：

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

编辑：问题在于我的身体标签溢出：隐藏用于其他一些部分。删除我可以在滚动时看到第二个图像。但情况是UX并不好，因为这两个图像不是固定的并且是可滚动的。那有什么解决方案吗？我希望图像具有按钮的感觉。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

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

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

Answer 3

您可以使用flex属性，但Flex标记的子元素应该没有margin-top或margin-bottom以避免滚动条。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    /* This one is for getting full page height to get a quick example, can omit in your code. */
    html,
    body {
      /* Box-model */
      height: 100%;
    }

    body {
      /* Box-model */
      display: flex;
      flex-direction: column;
    }

    body,
    #one,
    #two {
      /* Box-model */
      margin-top: 0;
      margin-bottom: 0;
    }

    #one,
    #two {
      /* Box-model */
      flex-basis: 50%;
    }

    #one {
      /* Visual */
      background-color: khaki;
    }

    #two {
      /* Visual */
      background-color: burlywood;
    }
  </style>
</head>
<body>
  <p id="one">This is paragraph one.</p>
  <p id="two">This is paragraph two.</p>
</body>
</html>

有一个响应屏幕，两个图像占据50％的高度

3 个答案: