2つの画像が50％の高さで反応する画面がある

2つの画像が両方の画面の半分を占めるが、2番目の画像が正しく来ていない。2つの画像が50％の高さで反応する画面がある

私は可能な限りすべてを使用していますが、それほど来ていません。

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

EDIT：隠されたいくつかの他の部分で使用された：問題は私のbodyタグのオーバーフローにということでした。それを削除すると、スクロール中に2番目の画像を見ることができます。しかし、状況は、2つの画像が固定されておらず、スクロール可能であるため、UXが良くないことです。そのための解決策はありますか？画像にボタンの感触が欲しい。

出典

2017-02-21 arqam

ここに解決策があります。あなたのコードでダミー画像を使用しました。あなたが求めていた例でコードを改善しました。これは画像を伸ばしません。

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

出典

2017-02-21 09:26:54

こんにちは、答えてくれてありがとう。問題は、私のボディー・タグがオーバーフローしていることです。隠された部分が他の部分で使われていました。それを削除すると、スクロール中に2番目の画像を見ることができます。しかし、2つの画像が固定されておらず、スクロール可能であるため、UXがうまくいかないことがあります。そのための解決策はありますか？画像にボタンの感触を持たせたい – arqam

スクロールを削除したい場合は、画像が表示されたら、背景色としてピンクとスカイブルーを使用して、少女と少年のみの画像を配置することができます。 –

新しいコード。チェック:) –

フレックスタグの子要素は、スクロールバーを避けるために何margin-topやmargin-bottomを持つべきではないが、あなたは、flexプロパティを使用することができ、この

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

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

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

出典

2017-02-21 09:28:31 looffee

を試してみてください。

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

出典

2017-02-21 11:56:17 RompePC

答えて

関連する問題