属性图像 div 响应式

Question

我必须修改这个脚本，以便包含的四个图像，在响应效果的情况下保持高度和宽度的属性。目前他们正在被粉碎。 显然，还将缩放效果保留在 div 内。我已经尝试了一切，但我不能。有什么想法吗？

我真的什么都试过了，但我不明白。

在线链接：

.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;">