javascript - Properties image div responsive

Question

I have to modify this script so that the four images contained, keep the properties of height and width in case of responsive effect. At the moment they are being crushed. Clearly, also keeping the zoom effect inside the div. I've tried everything but I can't. Some idea?

I have really tried everything but I can't understand.

online link:

.module_a {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    ),
    url(https://www.woodyvalley.it/prova/img_home/test_1.jpg) ;
   background-size: 100% 100%;
   background-repeat: no-repeat;
  width: 100% ;
  height: 230px ;
  margin: 0px 0 0 0px ;
  float: left ;
  padding: 0px ;
  
}

.module_b {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    ),
    url(https://www.woodyvalley.it/prova/img_home/test_2.jpg) ;
   background-size: 100% 100%;
   background-repeat: no-repeat;
  width: 100% ;
  height: 230px ;
  margin: 0px 0 0 0px ;
  float: left ;
  padding: 0px ;

}

.module_c {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    ),
    url(https://www.woodyvalley.it/prova/img_home/test_3.jpg) ;
   background-size: 100% 100%;
   background-repeat: no-repeat;
  width: 100% ;
  height: 230px ;
  margin: 0px 0 0 0px ;
  float: left ;
  padding: 0px ;
}

.module_d {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    ),
    url(https://www.woodyvalley.it/prova/img_home/test_4.jpg) ;
   background-size: 100% 100%;
   background-repeat: no-repeat;
  width: 100% ;
  height: 230px ;
  margin: 0px 0 0 0px ;
  float: left ;
  padding: 0px ;
}

.cap p {
  font-size: 26px ;
  font-weight: 200 ;
  color: white;
  font-family: MorganSansLining;
  margin: 0 auto ;
  text-align: center ;
  bottom: 100px ;
  margin-top: 100px ;

}

.zoom   {
  -moz-transition: all 0.5s ;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.zoom:hover {
 -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1) ;
}


.playBtn {
   position: relative;
   background-image:url("https://www.woodyvalley.it/prova/images/pre_1.png");
   background-size: 60px 60px;
   height: 60px;
   width: 60px;
   top: -90px;
   left: 0px;
    z-index:999;
}

.playBtn:hover {
   position: relative;
   background-image:url("https://www.woodyvalley.it/prova/images/post_1.png");
   background-size: 60px 60px;
   height: 60px;
   width: 60px;
   top: -90px;
   left: 0px;
    z-index:999;
}

.container_img {
    float: left;
    overflow: hidden;
    width: 24.99999%;
}



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container_img responsive">
<a href="vani-light-2.html"><div class="module_a cap zoom" >
  <p>TEXT FOR TEST 1</p>
</div></a>
</div>

<div class="container_img responsive">
<a href="gto-light-2.html"><div class="module_b cap zoom" >
  <p>TEXT FOR TEST 2</p>
</div></a>
</div>

<div class="container_img responsive">
<a href="vani-3.html"><div class="module_c cap zoom" >
  <p>TEXT FOR TEST 3</p>
</div></a>
</div>

<div class="container_img responsive">
<a target="_blank" href="https://youtu.be/ZJp9RcF5FmI"><div class="module_d cap zoom">
  <p>TEXT FOR TEST 4</p>
  <p class="playBtn"></p>
</div></a>
</div>

<br style="clear: both;">

Answer 1

等待大神答复