イメージがカットオフになる

Question

ページの下部にニップされたイメージがあります。私が持っている

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 

} 
.image_button{ 
    border-radius: 20px; 
    border: 5px solid #d3d3d3; 
    float: left; 
    margin-right:20px; 
} 
image-responsive is present in bootstrap. 
text-center is in bootstrap 

私のコードでは、それはちょうどページのサイドスクロールを避けるためです。私はサイドスクロールを避けることができますし、底から画像をカットしないようにする方法はありますか？

<div id="gender" style="visibility: hidden ;" > 
          <h4 style="left: 20%; top: 10%;position: absolute; " class="text-center" ><b>Click on the female or male figure to select a gender.</b></h4> 
          <div style="left: 20%; top: 20%;position: absolute;" > 
          <img id="man" src="images/man.png" onClick="pg4('bh'); sess2('gender male');" class="img-responsive image_button"> 
          <img id="woman" src="images/woman.png" onClick="pg4('bh'); sess2('gender female');" class="img-responsive image_button"> 
                  <h4 style="left: 19%; top: 100%;position: absolute;" class="text-center" >Male</h4> 
          <h4 style="left: 67%; top: 100%;position: absolute;" class="text-center" >Female</h4> 
          </div> 
     </div> 

Answer 1

あなたのCSSにこれを追加します。

img { 
    width: 100%; 
    height: auto; 
} 

が画像に一意のクラス名を追加し、上記のスタイルプロパティは、他には適用されませんことを確認するものとimgを置き換えますあなたのサイトの画像。