图像越来越用CSS

Question

我正在制作响应式页面cordova，图像尺寸为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%;
   }

我遇到的问题是在这种情况下图像超出范围如果我将高度设置为30％，那么它会变小并且不适合所有电话设备。编辑：添加图像