圖像越來越切斷css

我在頁面上有一個圖像從底部夾住。我有圖像越來越切斷css

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>

來源

2017-02-24 Aditya Bhavnani

發佈所有相關的標記，以便我們有問題的[mcve]。 –

「img-responsive」和「image_button」的風格在哪裏？ – zgood

可能是因爲它們是'float：left;'。嘗試添加一個'clearfix'到父容器。 – zgood

添加到您的CSS：

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

產品添加了獨特的類名的圖像和更換img與確保上面的樣式屬性沒有應用到其他圖像在您的網站上。

來源

2017-02-24 18:38:23

圖像越來越切斷css

回答

相關問題