图像被切断 css答案

【问题标题】：Image getting cut off css图像被切断 css
【发布时间】：2018-12-26 18:06:27
【问题描述】：

我在页面上有一张从底部被夹住的图片。我有

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>

【问题讨论】：

发布所有相关标记，以便我们有一个minimal reproducible example 的问题。
img-responsive 和 image_button 的样式在哪里？
可能是因为他们是float: left;。尝试将clearfix 添加到父容器。
没有改变任何东西。
@AdityaBhavnani 能否请您包含更多您的 HTML 标记？就像您在图片中包含的所有内容一样。

标签： html twitter-bootstrap css responsive-design

【解决方案1】：

将此添加到您的 CSS：

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

为图像添加一个唯一的类名并将img替换为该名称，以确保上述样式属性不会应用于您网站上的其他图像。

【讨论】：