图像越来越切断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

回答

相关问题