CSS关于高度100vh响应式

Question

我想知道我该怎么办，我想使用height: 100vh;之类的代码或任何代码来设置我的（图片/格）高度，以使其适合或在首次在Web / Mobile上打开我的网站时100％响应浏览器。我了解使用@media屏幕，
当我上下拖动鼠标到浏览器时，我的height: 100vh;很小，因为100vh使得我的（div /图像）看起来很小，但是我想要像我的（div / image）still height 100vh之类的东西，无论我上下拖动浏览器是什么，它都没有空间，并且高度与以前一样。我尝试过40rem，它看起来像100vh，看起来还可以。但我想知道任何方式或您的建议

如果您不明白我的意思，请在此处查看我的图像上的问题： This is my image!  
（谢谢）

.image  {  display:block; width:auto; height:100vmin; overflow:hidden; }


.image img  { display:block;  width:auto; height:100vmin; 
	position:absolute; 
 	left: 50%;
    transform: translateX(-50%); 
	margin: auto;
	opacity:1;
   }
   
   
   
.middle {
	
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	background:white; padding:30px;
	
	width:60%;

}



.bg-news-layout
{ display: inline-block; width:100%; height:auto;  position:relative;   background:white;  margin:0 auto;
 padding:0;  }



.col-news {  display:inline-block; width:33.33%;  height: auto;   background:pink;  position:relative; 
padding:0; margin:0;  white-space: normal;    overflow: hidden;  float: left;  }

<div class="bg-news-layout"> 

<div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text1 </div> 
</div> 
  
 <div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text2 </div> 
</div>

<div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text3 </div> 
</div>

</div>