Images are getting stretched with css

Asked Feb 28 '16 at 16:54

Active Feb 28 '16 at 18:29

Viewed 66 times

I am making responsive page cordova, I have image size of 500x500px.

<div id="div1" class="table_data1">
        <img src="img/contact.png" alt="contact_image" class="image_class">
        <h3 class="h3_class">Contact</h3>
    </div>



   .table_data1 {
        position: absolute;
       /* position in the center of the screen */

       left: 45%;
       top:  40%;
       height: 30%;
       /* text area height */

       width: 37%;
       /* text area width */

       text-align: center;
       padding: 10px 10px 10px 10px;
       /* image height is 200px (bottom 20px are overlapped with text) */

       background: rgb(119, 161, 38);
       color: white;
       margin: 5px;
       text-transform: capitalize;
       border-radius: 10px;
   }

   /*
   Common class used for setting params for div
   */
   .image_class {

        max-width: 100%;

        height: auto;
        padding:4%;
   }

I am facing problem that image is out of bound in this case If I set height as 30% then it become small and not fit for all phone devices EDIT : adding image

edited Feb 28 '16 at 18:29

asked Feb 28 '16 at 16:54

Amarjit

4,327
2
34
51

Can you tell us how it should look? Maybe provide a screenshot of desired effect. – Aziz Feb 28 '16 at 17:00
plese look that all icons are streched like user icon – Amarjit Feb 28 '16 at 18:30
This might help: http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Aziz Feb 28 '16 at 18:56
can you post a link to the page? – whodeee Mar 02 '16 at 21:18

Images are getting stretched with css

0 Answers0