CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-design
Addy
Addy

Reputation: 383

Image getting cut off css

I have an image on the page which gets nipped from the bottom. I have 

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

In my code, but that's just to avoid the side scroll on the page. Is there any way I can avoid the side scroll as well as not have the image cut from the bottom?

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

The base of the image gets cut, and it is not because of class "image_buttom"

Upvotes: 0

Views: 26107

Answers (1)

AndrewL64
AndrewL64

Reputation: 16301

Add this to your css:

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

Add a unique class name to the images and replace img with that to make sure the above style properties are not applied to other images on your site.

Upvotes: 5

Related Questions