CODEWITHSUNDEEP
css
arqam
arqam

Reputation: 3789

Having a responsive screen with two images taking 50% height

I have two images which should take half of both the screens but my second image is not coming properly.

I have used everything possible but its just not coming.

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>

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

enter image description here

EDIT : The problem was that in my body tag overflow:hidden was used in some other part. Removing that I am able to see the second image while scrolling. But the situation is that UX is not good as the two images are not fixed and are scrollable. Is there any solution for that? I want the images to have the feel of buttons.

Upvotes: 0

Views: 84

Answers (3)

Sahil Dhir
Sahil Dhir

Reputation: 4250

Here is the solution. I have used dummy images with your code. Improved the code with the an example you were asking for and this will also not stretch the images.

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="https://i.sstatic.net/pWVIY.png">
  </div>
  <div id="cody" class="CommonArea" ng-click='genderController.onGuyClicked()'>
    <img class="image-gender" src="https://i.sstatic.net/wPBPZ.png">
  </div>

</section>

Upvotes: 1

RompePC
RompePC

Reputation: 835

You could use flex property, although the children elements of the flex tag should have no margin-top or margin-bottom to avoid scroll bars. 

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

Upvotes: 0

looffee
looffee

Reputation: 81

try this

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

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

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

Upvotes: 0

Related Questions